オンマウスで画像をかえる
表示の例
トップページへ!
画像にマウスポインタをのせた時に、別の画像が表示されます。
ソースは下のようになります。
表示させたい場所のHTMLソースに貼り付けましょう。
(必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください)
ソース
<a href="index.html"><img border="0" src="images/icons1.gif" width="32" height="32" alt="トップページへ!" onMouseOver="this.src='images/icons8.gif'" onMouseOut="this.src='images/icons1.gif'"></a><img border="0" src="images/icons8.gif" width="1" height="1">
表示の例では、最初にパンダの画像が表示されています。src="images/icons1.gif" のところでパンダの画像ファイル名を指定します。大きさは width="32" height="32" のところです。alt="トップページへ!" のところで表示されるポップアップ文字の設定をしています。
onMouseOver="this.src='images/icons8.gif'" の images/icons8.gif がニワトリの画像ファイル名で、マウスポインタがのった時にはこの画像にかわります。
onMouseOut="this.src='images/icons1.gif'" のところが、マウスポインタがはなれた時の画像になりますから、パンダの画像ファイル名になっています。
<img border="0" src="images/icons8.gif" width="1" height="1"> のところで、ニワトリの画像を表示させています。表示といっても、width="1" height="1" というとても小さなサイズで表示させています。ですから画面上ではほとんどわかりません。(上のパンダの右横に小さな点が見えますか?)
これはマウスポインタがのった時、ニワトリの画像を出来るだけ早く表示させるために、あらかじめブラウザに読み込ませておくといったテクニックです。
ホームページお役立ち小技集のTOPへ