cssとjavascriptで色の変わるメニューを作ります。
とりあえず下で動作を見てください。
 メニュー1マウスONで文字色も変わります |
|
メニュー2マウスONで文字色も変わります |
|
メニュー3マウスONで文字色も変わります |
|
メニュー4マウスONで文字色も変わります |
|
メニュー5マウスONで文字色も変わります |
|
メニュー6マウスONで文字色も変わります |
|
メニュー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:[カラーコード];}
のように指定しています。
