オンマウスでセルの背景色をかえる
表示の例
・テストページ1へ
・テストページ2へ
・テストページ3へ
リンク文字にマウスポインタをのせた時に、表のセルの背景色がかわります。
ソースは下のようになります。
表示させたい場所のHTMLソースに貼り付けましょう。
(必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください)
ソース
<table border="0" cellpadding="2" cellspacing="5">
<tr>
<td align="center" bgcolor="#3366FF" id="CE1">
<a href="test1.html" onMouseOver="document.all['CE1'].style.background='#33CCFF'" onMouseOut="document.all['CE1'].style.background='#3366FF'"><font color="#FFFFFF">・テストページ1へ</font></a>
</td>
</tr>
<tr>
<td align="center" bgcolor="#3366FF" id="CE2">
<a href="test2.html" onMouseOver="document.all['CE2'].style.background='#33CCFF'" onMouseOut="document.all['CE2'].style.background='#3366FF'"><font color="#FFFFFF">・テストページ2へ</font></a>
</td>
</tr>
<tr>
<td align="center" bgcolor="#3366FF" id="CE3">
<a href="test3.html" onMouseOver="document.all['CE3'].style.background='#33CCFF'" onMouseOut="document.all['CE3'].style.background='#3366FF'"><font color="#FFFFFF">・テストページ3へ</font></a>
</td>
</tr>
</table>
<td align="center" bgcolor="#3366FF" id="CE1"> の部分は、いちばん上のセルの設定をしているところです。
bgcolor="#3366FF" はセルの背景色で、id="CE1" という名前が付けられています。
このid="CE1"のセルには、・テストページ1へ というリンク文字が表示されています。この文字にマウスポインタをのせた時に、セルの背景色がかわるようになっています。
onMouseOver="document.all['CE1'].style.background='#33CCFF'" の #33CCFF を、お好みの色にかえてください。
文字からマウスポインタがはなれた場合には、背景色を元の色に戻しています。
onMouseOut="document.all['CE1'].style.background='#3366FF'" の #3366FF を、お好みの色にかえてください。
表は下をご参考にあなたのお好みにかえてみましょう。
罫線のサイズ border="0" の 0
セル内のスペース cellpadding="2" の 2
セル間のスペース cellspacing="5" の 5
ホームページお役立ち小技集のTOPへ