- このスクリプトは画像の上にマウスカーソルが重なったときに違う画像ファイルへ変更します。
- 〜 JavaScript 〜
<script language="JavaScript">
<!--
function chgImg(imagesName,gifName){
document.images[imagesName].src=gifName;
}
//-->
</script>
|
- 〜 HTML 〜
<a href="index.htm"
onMouseOver="chgImg('INDEX','gif/index.gif')"
onMouseOut="chgImg('INDEX','gif/blank.gif')">
<img src="gif/blank.gif" border="0" name="INDEX">
</a>
|
- ドキュメントの中で変数imagesNameに指定してある名称の画像ファイルを変数gifNameの画像ファイルへ変更します。
ちなみにimagesNameは関数の第一引数、gifNameは関数の第二引数で取得しています。
- document.images[imagesName].src=gifName;
- 画像ファイルの名称を指定します。この例ではINDEXとしていてJavaScriptのdocument.imagesコレクションに登録されます。
- <img src="gif/blank.gif" border="0" name="INDEX">
- onMouseOverイベントはマウスカーソルが重なった時に発生するイベントで、関数chgImgを呼び出しています。第一引数にimgタグでのnameオプションで設定した名称、第二引数に重なった時に表示する画像ファイルを指定します。
- onMouseOver="chgImg('INDEX','gif/index.gif')"
- onMouseOutイベントはマウスカーソルが離れたときに発生するイベントで、ここでも関数chgImgを呼び出しています。第一引数にimgタグでのnameオプションで設定した名称、第二引数に重なっていない時に表示する画像ファイルを指定します。
- onMouseOut="chgImg('INDEX','gif/blank.gif')"
| |