低価格・高品質・最速のHTMLコーディングはクロノドライブへ

CSSは必要なし! onmouse属性を使った簡単なロールオーバーの作り方

画像のロールオーバーに関するまとめ記事を更新しました。下記リンクよりご覧ください。
【比較】覚えておきたいロールオーバー画像切替え 5つの手法(CSS?JS?onmouseover?)

バナーなどでロールオーバーした際に画像を変化させる方法はいくつかありますが、今回はonmouse属性を使ったロールオーバーの方法をご紹介します。

banner.jpg

使い方

例えば、リンクバナーをロールオーバーした際に画像を変化させるには、

1<a href="./link.html">
2<img src="img/banner.jpg" onmouseover="this.src='img/banner_over.jpg'" onmouseout="this.src='img/banner.jpg'" />
3</a>

上記のように記述します。

onmouseover、onmouseoutがそれぞれ、ロールオーバーしたとき、画像からポインタを離したときの動作を意味します。thisとは、「このイベントが発生した場所」を意味します。つまり、「onmouseover=”this.src=’img/banner_over.jpg'”」という記述なら、「ロールオーバーした際に、この場所の画像をbanner_over.jpgに置き換える」という意味となります。

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

例えば、タイプが画像のinputタグをロールオーバーさせる場合は、

1<input type="image" name="test" src="./img/banner.jpg" onmouseover="this.src='img/banner_over.jpg'" onmouseout="this.src='img/banner.jpg'" />

上記のように記述します。

サンプル

inputタグに対してonmouse属性を使ってロールオーバーを表現したサンプルです。

注意点として、onmouseover属性を指定したら、必ずonmouseout属性もセットで指定しなければなりません。仮にonmouseover属性だけを指定している場合、画像からポインタを離したときの画像が未指定のため、画像が表示されなくなってしまいます。

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

ロールオーバーの方法も、使い分けることで表現に幅が出ます。どうぞご活用ください。

関連リンク

画像を用意しなくてもCSSだけでロールオーバー効果を表現するテクニック
もうちらつきで困らない! 画像のロールオーバーでちらつきを防ぐテクニック

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ