マウスが乗ったらテーブルの色が変わるリンクメニュー



cssとjavascriptで色の変わるメニューを作ります。
とりあえず下で動作を見てください。

imagesメニュー1マウスONで文字色も変わります
imagesメニュー2マウスONで文字色も変わります
imagesメニュー3マウスONで文字色も変わります
imagesメニュー4マウスONで文字色も変わります
メニュー5マウスONで文字色も変わります
imagesメニュー6マウスONで文字色も変わります
imagesメニュー7マウスONで文字色も変わります

これは簡単に作れます。
テーブルでリンクメニューを作り
<table border="[好きなサイズ]"
width="[好きなサイズ]"
cellspacing="[好きなサイズ]"
cellpadding="[好きなサイズ]"
class="[cssで設定したクラスを使ってもいい]">
<tr>
<td class="[cssで設定したクラスを使ってもいい]"
onmousemove="this.style.backgroundColor='[好きな色]';
this.style.borderColor='[好きな色]'"
onmouseout="this.style.backgroundColor='[好きな色]';
this.style.borderColor='[好きな色]'">
<a href="#">
<img border="0" src="[メニューの頭に表示する画像]" />
[メニューに表示する文字]</a></td>
</tr>
</table>

のようにtdの部分にマウスオーバーと
マウスアウトのスタイルを指定するだけです。
もちろん各セルごとに全く違う色を指定できます。

リンク文字の変更は通常のcssと同じく
テーブルにIDを指定し、

#[ID名] {
width:[サイズ];
height:[サイズ];
background:#[カラーコード];
}
#[ID名] a {text-decoration: underLine; color:#[カラーコード]; }
#[ID名] a:visited {text-decoration: underLine; color:[カラーコード];}
#[ID名] a:hover {text-decoration: none; color:[カラーコード];}
#[ID名] a:active {text-decoration: none; color:[カラーコード];}

のように指定しています。

記事id:63 / 2277PV

関連記事