手軽にロールオーバーを実装する

いつもならナビゲーション周りは、定番の外部ファイルからのスクリプトでササッと処理しています。
バナーなどのいわゆる「ロールオーバー」させる時も同じです。
しかし、昨日、仕様に無かったはずのソレが急遽必要になり、応急措置として利用してみました。

しかしまぁ、今回、”onmouse属性”っていうものを改めて知りました。
このロールオーバーの方法って、まだいろいろとあるみたいで、調べてみてナルホドな結果が得られて満足です。

以下がそのコードです。
↓↓↓ ↓↓↓

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

 

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

このonmouseover属性を使ったロールオーバーが他と違うポイントは、通常ではロールオーバーが難しいタグに対して（例えば「input」タグ）、それが適用出来る点です。
タイプが画像のinputタグをロールオーバーさせる場合だと・・・

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

 

おぉ～、シンプルです。(ﾟ∀ﾟ)

注意しなければならいこと。
onmouseover属性を指定したら、必ずonmouseout属性もセットで指定すること。
そうしなければ、画像からポインタを離した時の画像が未指定のため、非表示となります。

 

デメリットもあります。
Javascriptを用いているので、閲覧者サイドのブラウザでJavascriptをサポートしていない場合や、任意でJavascriptの動作をストップしている場合は正しく機能しません。
（最近ではあまりこのようなケースは無いよう感じられますが・・・）

ロールオーバー方法も、1つだけではなく何個か手法を使い分けられるようになると、表現に幅が出てきて、効率よくプロジェクトを進行させていけると思います。

 

↓↓定期的に聴きたく＆観たくなるヤツ
public enemy – hazy shade of criminal

 

Editor’s Note

普段使用しているラップトップが調子が悪い。
Macを購入する絶好のタイミングなのに、6月にどうやら新作の発表があるとのこと。
この先、Mac / Win　の環境を整えていく予定ではあるため、先にWin機を購入しようかと検討中。
どうせならBTOのハイスペックなヤツにしたる。(ﾉ´∀｀*)