画像の上にマウスを乗せる、マウスボタンが押されると画像が切り替わる (1枚だけ)
説明
画像の上にマウスを乗せる、マウスボタンが押されると画像が切り替わるようにするにはimgタグにid名を付けておきます。このID名を元にgetElementById()で画像オブジェクトにアクセスしonmouseover、onmouseout、onmousedown、onmouseupにマウスが乗った時、離れた時、マウスの左ボタンが押された時、マウスの左ボタンが離された時の処理を指定します。onmouseover、onmouseout、onmousedown、onmouseupでは既に設定してあるイベントが上書きされてしまうので、これを避けたい場合には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";
}
imgObj.onmousedown = function(){ // マウスの左ボタンが押された時の処理
this.src = "images/button01_down.gif";
}
imgObj.onmouseup = function(){ // マウスの左ボタンが離された時の処理
this.src = "images/button01_over.gif";
}
}