JavaScriptを使った初歩的なテクニック。マウスオーバーした際に画像を切り替える方法を紹介します。

使用するのはJavaScriptの[on mouse]属性です。
今回は[onmouseover]と[onmouseout]を使い、それぞれ、画像にマウスカーソルが乗ったとき(マウスオーバー)と画像からポインタが離れたとき(マウスアウト)の動作を指定していきます。

具体的な例としてサンプルのコードを書いてみましょう。

<a href="https://on-ze.com">
<img src="images/sample-01.png" onmouseover="this.src='images/sample-02.png'" onmouseout="this.src='images/sample-01.png'" />
</a>

コードの中の[this]は、「イベントが発生した場所」を意味します。

つまり「onmouseover=”this.src=’images/sample-02.png'”」という記述なら「ロールオーバーした際に、この場所の画像を『sample-02.png』に置き換える」という意味となります。

さらに[onmouseover]の指定だけだと元の画像に戻らないので、忘れずに[onmouseout]を記述しておくことが重要なポイントです。
[onmouseover]属性を指定したら、必ずonmouseout属性もセットで指定しましょう。

onmouse属性のメリット

onmouse属性を使ったロールオーバーが他の方法と違う点は、inputタグなど、通常ではロールオーバーが難しいタグに対してもロールオーバーが適用できるという点です。

例えば、タイプが画像のinputタグをロールオーバーさせる場合は以下のように記述します。

<input type="image" name="sample" src="/images/sample-01.png" onmouseover="this.src='/images/sample-02.png'" onmouseout="this.src='/images/sample-01.png'" />

通常の画像に指定するケースとほぼ同じなので簡単ですね。

onmouse属性のデメリット

この方法を使うデメリットとしては、JavaScriptを用いた方法なので、閲覧者側のブラウザでJavaScriptをサポートしていない場合や、任意でJavaScriptの動作を止めている場合は正しく機能しません。

onmouse属性を使った簡単なロールオーバーの作り方。:サンプル