マウスオーバーで画像を入れ替えるJavaScript

JavaScriptで、マウスオーバーイベント時に画像を入れ替える方法。IMG要素のタグ内に直接指定するタイプ。

JavaScriptによるDOM操作で作る方法については、「マウスオーバーで画像を入れ替えるJavaScript(DOM操作)」のページへ。

jQueryを使って作る方法については、「jQueryを使い、マウスオーバーで画像を入れ替える方法」のページへ。

実装例

実装例(サンプル)の動作について

  1. 画像にマウスのカーソルを合わせると、画像を入れ替える。
  2. 画像からマウスのカーソルを外すと、元の画像に戻す。

ソースコード

HTML

<div>
    <img src="sampleA.png" onmouseover="this.src='sampleB.png'" onmouseout="this.src='sampleA.png'");
</div>
  • 「sampleA.png」の画像の上にマウスのカーソルを合わせると、「sampleB.png」に変わる。
  • 「sampleB.png」の画像の上からマウスのカーソルを外すと、「sampleA.png」に戻る。

スポンサード リンク

カテゴリー: JavaScript, 画像, 逆引き パーマリンク