オンマウスで表の背景画像をかえる
表示の例
・テストページ1へ

・テストページ2へ

・テストページ3へ
リンク文字にマウスポインタをのせた時に、表の背景画像がかわります。
ソースは下のようになります。
表示させたい場所のHTMLソースに貼り付けましょう。
(必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください)
ソース
<table border="0" cellpadding="5" cellspacing="0" width="300" background="images/back9.gif" id="myTB">
<tr>
<td align="center">
<a href="test1.html" onMouseOver="document.all['myTB'].style.backgroundImage='url(images/back6.gif)'">・テストページ1へ</a><br><br>
<a href="test2.html" onMouseOver="document.all['myTB'].style.backgroundImage='url(images/back7.gif)'">・テストページ2へ</a><br><br>
<a href="test3.html" onMouseOver="document.all['myTB'].style.backgroundImage='url(images/back8.gif)'">・テストページ3へ</a>
</td>
</tr>
</table>
・テストページ1へ の文字のソースは下の部分になります。
<a href="test1.html" onMouseOver="document.all['myTB'].style.backgroundImage='url(images/back6.gif)'">・テストページ1へ</a>
backgroundImage='url(images/back6.gif)' の images/back6.gif を、マウスポインタがのった時にかわる画像のファイル名にかえてください。
表は下をご参考にあなたのお好みにかえてみましょう。
罫線のサイズ border="0" の 0
セル内のスペース cellpadding="5" の 5
セル間のスペース cellspacing="0" の 0
表の幅 width="300" の 300
最初の背景画像 background="images/back9.gif" の images/back9.gif
ホームページお役立ち小技集のTOPへ