マウスカーソルを乗せると色が変わるテーブルを作ってみる

ナビゲーションバーなど、必要なリンク先がわかればそれで十分なのですが、ちょっとがんばってインタラクティブにしてみます。これでは画像を使いません。

テーブルにマウスカーソルを持って行ってみてください。背景色が変わります。

　HOME　 　Diary　 　Profile　

【ソース】

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#FFCC66" onMouseOver="this.style.backgroundColor='#FF9933'" onMouseOut="this.style.backgroundColor='#FFCC66'">
<a href="#">　HOME　</a>
</td>
</tr>
</table>

※わかりやすいように1列だけのソースにしています。

onMouseOver="this.style.backgroundColor='#FF9933'" でマウスカーソルが載ったときの色を、
onMouseOut="this.style.backgroundColor='#FFCC66'"でマウスカーソルが放れたときの色を指定しています。

Back