マウスオーバー時に画像を切り替える1

デモ

サンプルコード

HTML

<img src="img/sample_out.gif" width="100" height="25" alt="" id="sample" />

JavaScript

var imgElem = document.getElementById('sample');

imgElem.onmouseover = function() {
	this.src = 'img/sample_over.gif';
};

imgElem.onmouseout = function() {
	this.src = 'img/sample_out.gif';
};

onmouseoverイベントでマウスオーバーした時に画像要素のsrc属性に、切り替える画像のパスを代入します。
onmouseoutイベントでマウスカーソルが離れた時に画像要素のsrc属性に、元に戻す画像のパスを代入します。

JavaScript逆引きリファレンス一覧へ戻る