JavaScriptによるDOM操作で、マウスオーバーイベント時に画像を入れ替える方法。
IMG要素のタグ内に直接指定するタイプについては、「マウスオーバーで画像を入れ替えるJavaScript」のページへ。
jQueryを使って作る方法については、「jQueryを使い、マウスオーバーで画像を入れ替える方法」のページへ。
実装例
実装例（サンプル）の動作について
- 画像にマウスのカーソルを合わせると、画像を入れ替える。
- 画像からマウスのカーソルを外すと、元の画像に戻す。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
var $sampleImg = document.getElementById( "sampleImg" );
$sampleImg.src = "sampleA.png";
$sampleImg.onmouseover = function(){
this.src = "sampleB.png";
};
$sampleImg.onmouseout = function(){
this.src = "sampleA.png";
};
}
</script>
window.onload = function () {
var $sampleImg = document.getElementById( "sampleImg" );
$sampleImg.src = "sampleA.png";
$sampleImg.onmouseover = function(){
this.src = "sampleB.png";
};
$sampleImg.onmouseout = function(){
this.src = "sampleA.png";
};
}
</script>
HTML
<div>
<img id="sampleImg">
</div>
<img id="sampleImg">
</div>