ホームページ作成ＴＯＰ > マウスで変化 > 別々の画像を切り替える
ロールオーバー 別々の画像を切り替える
マウスが上に来た時に、別々の画像（下記の２つの画像）を切り替えて表示させてロールオーバー効果を出す方法です。
（←画像１）,
（←画像２）
↑この２枚の画像を切り替えます。
ここでは、javaを使用しない方法になります。
sample
説明と書き方
リスト（<ul>〜</ul>）で作成したメニューの各項目のリンクの背景に画像を表示し、マウスが上に来た時に別の背景画像を表示する事で実現してます。
同時に文字色も変更してます。
（今回は、リストを使用してますが、リスト以外でも可能です。）
また別々の画像を表示する為、切り替える側の画像は最初読み込まれていない為に、切り替えに時間がかかる場合があります。これは、マウスが上に来て初めて画像を読み込む為に起きる事です。
よって今回は、最初から読み込ませておくが、表示だけさせない様にdisplay:noneを画像に適用してあります。
実際には、下記の位置にて読み込み、非表示にしてあります。
リストをブロック範囲に変換してリンクさせる方法については、リストでメニューを作る（横並び）〜ブロック範囲でリンク〜を参照願います。
『＆』は<a href="">〜</a>の中で使用できないので & として特殊文字としてあります。特殊文字に関しましては、1upホームページ作成のＴＯＰ > 文章や文字 > 特殊な文字を表示するを参照して下さい。
ＨＴＭＬ素材コードの書き方は
<ul> <!-- ↓リストここから↓ -->
<li><a href="リンク">TOP</a></li> <!-- 項目１ -->
<li><a href="リンク">NEWS</a></li> <!-- 項目２ -->
<li><a href="リンク">Q&A</a></li> <!-- 項目３ -->
</ul> <!-- ↑リストここまで↑ -->
<img src="画像２" alt=""> <!-- 画像読み込み -->
スタイルシート素材コードの書き方は
/* リスト全体 */
ul
{
width:450px; /* リスト全体の幅 */
height:35px; /* リスト全体の高さ */
list-style:none; /* リストマークを無しにする */
text-align:center; /* 文字を中央 */
font-size:130%; /* 文字を大きく */
font-weight:bold; /* 文字を太く */
line-height:150%; /* 行の高さを調整 */
}
/* 各項目 */
li
{
width:150px; /* 項目の幅 */
height:35px; /* 項目の高さ */
float:left; /* 各項目を左側から回り込み */
}
/* リンク部分 */
a
{
display:block; /* リンク範囲をブロックに変換 */
width:100%; /* リンク範囲（幅）をリスト項目範囲全て */
height:100%; /* リンク範囲（高さ）をリスト項目範囲全て */
background-image:url(画像１); /* リンク範囲の背景画像設定 */
background-repeat:no-repeat; /* 背景画像繰り返し表示しない */
color:#ffffff; /* リンク文字色 */
}
a:link
{color:#ffffff;} /* まだ見ていないリンク色 */
a:visited
{color:#ffffff;} /* 既に見たリンク色 */
a:hover
{
background-image:url(画像２); /* マウスが上に来た時の背景画像設定 */
color:#4a494a; /* マウスが上に来た時の文字色 */
}
/* リンク部分 */
img
{display:none;} /* 画像２を表示しない */
ホームページ作成ＴＯＰ > マウスで変化 > 別々の画像を切り替える > このページのＴＯＰ ▲
