[PR] 専門学校

オンマウスでページの背景画像を変える

マウスを乗せるとページの背景画像が変わる

サンプル画像の上にマウスを乗せるだけで背景画像が変わります

素材屋さんでもおなじみですね。マウスを乗せるだけで背景画像が変わります。このサイトはスタイルシートで背景色を指定いるのでページ全体は変えられませんが、そうでない場合は下記のタグをコピーして表示したいところに貼りつけるだけで、オンマウスするたびにページごと背景画像が変わります。

テーブルを作り、個々のセルでサンプル表を作ります。黄色の部分を変えてください。セルのサイズは自由に変えて下さい。

<table cellspacing="0">
<tr>
<td><img src="画像のアドレス" width="30" height=" 30" onmouseover="document.body.background='画像のURL'"></td>
</tr>
</table>

上記のソース　ここからコピーしてね。↓

<TABLE cellspacing="0">
<tr>
<td><img src="1.gif" width="30" height="30" onMouseOver="document.body.background='http://yume.hacca.jp/koiki/page/1.gif'"></td>
<td><img src="2.gif" width="30" height="30" onMouseOver="document.body.background='http://yume.hacca.jp/koiki/page/2.gif'"></td>
<td><img src="3.gif" width="30" height="30" onMouseOver="document.body.background='http://yume.hacca.jp/koiki/page/3.gif'"></td>
<td><img src="4.gif" width="30" height="30" onMouseOver="document.body.background='http://yume.hacca.jp/koiki/page/4.gif'"></td>
<td><img src="5.gif" width="30" height="30" onMouseOver="document.body.background='http://yume.hacca.jp/koiki/page/5.gif'"></td>
<td><img src="6.gif" width="30" height="30" onMouseOver="document.body.background='http://yume.hacca.jp/koiki/page/6.gif'"></td>
<td><img src="7.gif" width="30" height="30" onMouseOver="document.body.background='http://yume.hacca.jp/koiki/page/7.gif'"></td>
<td><img src="8.gif" width="30" height="30" onMouseOver="document.body.background='http://yume.hacca.jp/koiki/page/8.gif'"></td>
</tr>
</TABLE>

→　　ここからサンプル確認できます。

→　　クリックでページの背景画像を変える方法はこちら

●当サイトのソースは、IE6.0＋のみ動作確認をしております。それ以外のブラウザ、特にネットスケープでは正しく作動しない場合がございます。ご了承下さい。

★skip ページtop