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