【JavaScript】 イベントハイドラを使い、CSSを使わないで、画像置換を行う

イベントハンドラを使うことで、CSSの擬似要素を使わずに画像置換を行います。

イベントハンドラの書き方

 <img src="#.png" alt="" on...="'JavaScript'">

「on...」はhtmlの要素で、onmouseoverやonclickなどがあり、その要素にJavaScriptを設定して書き込むことができます。
インハンドラで画像置換を行う方法は、画像が少ないときやなどに向いていますが、複数の画像には向いていません。
onmouseoverの中に、「this.src=''」で画像を指定してあげます。
そして、onmouseoutにもともとの画像を指定してあげることで、CSSの擬似クラスのhoverと同じように見せることができます。

実行例

<p><img src="img/btn.png" alt="" onmouseover="this.src='img/btn_over.png'" onmouseout="this.src='img/btn.png'" ></p>