ロールオーバー時のイベントハンドラで表示する画像を切り替える
マウスなどのポインティングデバイスでロールオーバーした時に、表示する画像を切り替えるコードです。イベントハンドラのonmouseover属性とonmouseout属性をimg要素に指定します。
onmouseover属性とonmouseout属性は、必ずセットで指定しなければなりません。
注意点としては、JavaScriptが動作しない環境やポインティングデバイスが使えない環境では機能しないということです。
なお、onmouseover属性/onmouseout属性は、h1-h6要素やp要素など、img要素以外でも指定することができます。
|
1 |
<img src="images/photo_out.png" alt="代替テキスト" onmouseover="this.src='images/photo_over.png'" onmouseout="this.src='images/photo_out.png'" /> |
