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属性を使った簡単なロールオーバーの作り方。:サンプル