画像の上にマウスを乗せると画像が切り替わる (1枚だけ)
説明
画像の上にマウスを乗せると画像が切り替わるようにするにはimgタグにid名を付けておきます。このID名を元にgetElementById()で画像オブジェクトにアクセスしonmouseoverとonmouseoutにマウスが乗った時と離れた時の処理を指定します。onmouseover、onmouseoutでは既に設定してあるイベントが上書きされてしまうので、これを避けたい場合にはaddEventListener()を使ってイベントを設定するようにします。
サンプルプログラム
window.onload = function(){
var imgObj = document.getElementById("button01");
imgObj.onmouseover = function(){ // マウスが乗った時の処理
this.src = "images/button01_over.gif";
}
imgObj.onmouseout = function(){ // マウスが離れた時の処理
this.src = "images/button01_normal.gif";
}
}