web creators特別号

いますぐ悩みが解決する！ Webデザイン仕事で役立つ54のアイデア

インタラクション＆エフェクト 3-11
汎用的なJavaScriptのロールオーバースクリプト

ここでは通常のJavaScriptでロールオーバーを表現するスクリプトを紹介する。jQueryなどは利用していないため、ほかのJavaScriptライブラリとの競合も起こさず、汎用性が高い。

制作・文／小川和真（ビヨンド・パースペクティブ・ソリューションズ株式会社）

BROWSER IE…8over　Firefox…3.6over　Safari…3.1over　Chrome…10over

01

ロールオーバーとは、マウスカーソルが画像の上に載ったとき（マウスオン）に別の画像を表示させ、マウスカーソルが画像の上から外れたとき（マウスオフ）は元に戻るような仕組みのことである【1-1】。

この仕組みは、グローバルナビやボタンなどの用途で、多くのWebサイトが使用している【1-2】。

ロールオーバーを実現する主な方法としてはCSSを利用した方法とJavaScriptを利用した方法の2 つがある。

ここではJavaScriptを用いた方法について解説しよう。CSSを用いた方法については次項で解説する。


【1-1】ロールオーバーの動作。マウスオフとマウスオンで上下の画像が入れ替わる。


【1-2】ロールオーバーを用いたサイト例。ここではメニューの部分にロールオーバーを用いている。

02

では実際に実装してみよう。

まずは、マウスオンの画像とマウスオフの画像を用意しよう。画像は一見してマウスオフとマウスオンの違いがわかるようにしよう。

このとき、画像のファイル名にマウスオンの画像には_on【2-1】、マウスオフの画像には_off【2-2】というsuffix（接尾辞）をつける。

ファイル名に特別なルールはないのだが、このようにすればsuffixの部分だけを変更すればすむので便利だ。

ロールオーバーは1カ所につき2つの画像が必要なため、ファイル数が増えがちになる。管理の手間を省くためにも、できるだけわかりやすいファイル名にしておこう。

今回は、この画像のファイルパスを変更することでロールオーバーを実現していく【2-3】。


【2-1】マウスオン時のファイル。ファイル名はbutton_on.jpgとする。


【2-2】マウスオフ時のファイル。ファイル名はbutton_off.jpgとする。


【2-3】画像ソースパスの変更。

03

次に、ロールオーバーを実現するJavaScriptコードを記述しよう【3-1】。

マウスオン／マウスオフで画像を切り替 える処理を行っているのが5行目から26行目になる。

マウスオンしたとき、画像名に_offがついていれば_onに画像のパスを変更している。

5行目から15行目がimgタグのsrcを変更するロジックになっており(1)、16行目から26行目がinputタグの画像のsrcを変更するロジックになっている(2)。

画像のソースコードで、(1)は黒丸1、(2)は黒丸2。


【3-1】ロールオーバーを実現するコード

04

次にHTMLファイルにJavaScriptコードを読み込む記述を行う。

まずは【3-1】を外部ファイルとして保存しておこう。その際、ファイル名はrollover.jsとする。

このように、ロールオーバーのコードを外部ファイルとすることで、複数のページで使用することが可能となる。

次に【4-1】を、ロールオーバーを使用するページのHTMLファイルに記述すれば完成だ【4-2】。


【4-1】rollover.js を読み込むための記述。


【4-2】上のように、マウスオンの時とマウスアウトした時で画像が切り替わる。

05

前述したが、JavaScriptを使ったロールオーバーには、メリットとデメリットがある。

メリットは汎用性の高さが挙げられるだろう。一度、ロールオーバー用のスクリプトを作成してしまえば、他のページでも利用することができる。また、画像をマウスオン／マウスオフの2枚用意すればよいので、多用する場合でも導入が手軽だ。

一方デメリットだが、これはJavaScriptが動作していない環境、もしくはユーザーが動作をオフにしている場合にロールオーバーしなくなることだろう【5-1】。

JavaScriptが動作していない環境としては、一部のガラゲー携帯がある。

ただ、現在ではほとんどの環境で利用できるので、あまり気にする必要はないかもしれない。


【5-1】たとえば、Firefoxで左のようにJavaScriptを無効にすると、右のようにマウスオンでも画像が切り替わらない。


[目次に戻る]

 

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。


※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。