Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。
「ロールオーバー表現」とは主にリンク要素にマウスポインタを載せた際に、色や画像等が切り替わる表現のことです。
「ロールオーバー」に似た表現で「マウスオーバー」「オンマウス」「ホバー」といった言い方があります。
どれも同じ意味で使われることがありますが、厳密には「ロールオーバー」は切り替わる動作そのものを指し、「マウスオーバー」「オンマウス」「ホバー」はマウスポインタが何かに乗った状態のことを指します。
今や画像のロールオーバーは、グローバルナビゲーションやボタン等Webサイトを構築する上で必ず使用すると言っても過言ではない技術ですが、実装方法がいくつか存在するため、どの方法で実装すればいいのか迷うことがあるかと思います。
また、普段使っている方法が果たしてベストなのか？疑問に思いながらコーディングを行なっているコーダーも少なくはないのではないでしょうか？
そこで今回は、画像ロールオーバーの実装方法をいくつか紹介し、それぞれのメリットやデメリット、使い時などを紹介いたします。
目次
- ロールオーバー実装方法比較表
- 【手法1】CSSのみ（background-imageの切替え）
- 【手法2】CSSスプライト（background-positionの切替え）
- 【手法3】<img>+CSS（マウスオーバーでimg非表示）
- 【手法4】<img>のみ（onmouseout属性, onmouseover属性）
- 【手法5】<img>+Javascript（src属性の置き換え）
- まとめ
ロールオーバー実装方法比較表
今回は下記5つのロールオーバー実装方法を比較します。
下記で紹介する手法はすべてIE6に対応しております。
| No. | 手法 | CSS | JS | 実装 効率 |
メンテ ナンス性 |
印刷 対応 |
|---|---|---|---|---|---|---|
| 1 | CSSのみ（background-imageの切替え） | ○ | - | △ | △ | × |
| 2 | CSSスプライト（background-positionの切替え） | ○ | - | × | △ | × |
| 3 | <img>+CSS（マウスオーバーでimg非表示） | ○ | - | △ | △ | ○ |
| 4 | <img>のみ（onmouseout属性, onmouseover属性） | - | ○ | ○ | ○ | ○ |
| 5 | <img>+Javascript（src属性の置き換え） | - | ○ | ◎ | ○ | ○ |
それでは1つずつ紹介していきます。
【手法1】CSSのみ（background-imageの切替え）
CSSのbackgroundプロパティを使用して、背景画像として画像を配置し、:hover擬似クラスでロールオーバー後の画像を指定する方法です。
サンプルコード
html
|
1 2 3 |
<div class="demo01"> <a href="#">サンプル</a> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.demo01 { background: url("/img/btn_sample_out.png") no-repeat; /* ロールオーバー時のチラつき防止 */ } .demo01 a { width: 200px; height: 60px; background: url("/img/btn_sample_out.png") no-repeat; display: block; text-indent: -9999px; } .demo01 a:hover { background-image: url("/img/btn_sample_over.png"); } |
デモ
メリット
- 画像サイズや画像ファイル名に変更があった場合、HTMLを修正する必要がない（CSSのみの修正で済む）
デメリット
- 通常時・オーバー時共に背景画像として設定しているため、印刷時にデフォルトの設定だと画像が表示されない
【手法2】CSSスプライト（background-positionの切替え）
手法1とほとんど同じですが、CSSスプライトと呼ばれる方法です。
ロールオーバー前と後の画像をまとめて一つの画像を用意し、:hover擬似クラスでbackground-positionを移動させる方法です。
用意する画像
btn_sample_sprite.png
サンプルコード
html
|
1 2 3 |
<div class="demo02"> <a href="#">サンプル</a> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
.demo02 a { width: 200px; height: 60px; background: url("/img/btn_sample_sprite.png") no-repeat; display: block; text-indent: -9999px; } .demo02 a:hover { background-position: 0 -60px; } |
デモ
メリット
- ロールオーバー前、後の画像が1枚になっているため切替時の画像読み込みが発生しない
- 画像のリクエスト回数を削減できる
- 画像サイズや画像ファイル名に変更があった場合、HTMLを修正する必要がない（CSSのみの修正で済む）
デメリット
- ロールオーバー前、後の画像をひとまとめにした画像を用意する必要がある
- 通常時・オーバー時共に背景画像として設定しているため、印刷時にデフォルトの設定だと画像が表示されない
【手法3】<img>+CSS（マウスオーバーでimg非表示）
通常時の画像をimgで設置し、マウスオーバー時の画像を背景画像で指定します。
マウスオーバー時にimgを非表示にすることで背景画像を表示させる方法です。
サンプルコード
html
|
1 2 3 4 5 |
<div class="demo03"> <a href="#"> <img src="img/btn_sample_out.png" width="200" height="60" alt="サンプル"> </a> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.demo03 { background: url("/img/btn_sample_over.png") no-repeat; } .demo03 a { display: inline-block; } .demo03 a:hover { background-color: transparent; /* IE6対応 */ } .demo03 a:hover img { visibility: hidden; } |
デモ
メリット
- ロールオーバー前、後の画像を予め読み込んでおけるので切替時の画像読み込みが発生しない
デメリット
- 画像サイズや画像ファイル名に変更があった場合、修正箇所が多い（HTMLとCSS両方）
【手法4】onmouseout属性,onmouseover属性（JavaScript）
imgに対してonmouseout属性,onmouseover属性を使用し、通常時とマウスオーバー時それぞれの画像パスを指定する方法です。
サンプルコード
html
|
1 2 3 4 5 |
<div class="demo04"> <a href="#"> <img src="img/btn_sample.png" width="200" height="60" alt="サンプル" onmouseover="this.src='img/btn_sample_over.png'" onmouseout="this.src='img/btn_sample.png'"> </a> </div> |
デモ
メリット
- CSSが不要でimgタグのみで実装が可能
- フォームのボタンなどに用いるinputタグに対しても使用可能
デメリット
- JavaScriptを使用しているため、閲覧側でJavaScriptの動作をオフにしている場合は正しく動作しない
- ロールオーバー時に読み込みが発生する
【手法5】<img>+Javascript（src属性の置き換え）
jquery.easy-rollover.jsを使用し、マウスオーバー時にimgのsrc属性を置き換える方法です。
jquery.easy-rollover.jsはロールオーバー時の読み込みを軽減させるための、プリロード付きロールオーバーJavaScriptです。
※ご利用の際は念のためこちらより、最新のソースをダウンロードしていただきますようお願いします。
サンプルコード
html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="demo05"> <a href="#"> <img src="img/btn_sample_out.png" width="200" height="60" alt="サンプル"> </a> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/jquery.easy-rollover.js"></script> <script> $(function(){ $('img').easyRollover(); }); </script> |
JavaScript（jquery.easy-rollover.js）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
(function($){ $.fn.easyRollover = function(config){ var defaults = { suffix: '_out.', suffix_replace: '_over.' }; opt = $.extend(defaults, config); var src, src_replace, _self, image; for(var i=0;i<this.length;i++){ src = this[i].getAttribute('src'); if(src.indexOf(opt.suffix) > -1){ src_replace = src.replace(opt.suffix, opt.suffix_replace); image = new Image(); image.src = src_replace; $(this[i]).hover(function(){ this.setAttribute('src', src_replace); }, function(){ this.setAttribute('src', src); }); } } }; })(jQuery); |
デモ
メリット
- CSSが不要なので実装の手間が少ない（都度ロールオーバーの指定をする必要がない）
- 予めロールオーバー後の画像が読み込まれるため、ロールオーバー時に読み込みが発生しない
デメリット
- JavaScriptを使用しているため、閲覧側でJavaScriptの動作をオフにしている場合は正しく動作しない
まとめ
基本的には、実装効率やメンテナンス性の観点から、手法5「<img>+Javascript」にて実装し、JavaScript無効の環境に対応させる必要がある場合は、手法3「<img>+CSS（マウスオーバーでimg非表示）」で実装するのが良いでしょう。（手法1,2は印刷対応ができないため）
ただし、印刷対応の必要がない場合や、ロールオーバー画像が複数あり、を一つにまとめることができる場合は手法2「CSSスプライト（background-positionの切替え）」を使用することで、リクエスト数の削減といったメリットを得られます。
それぞれの手法の特性を理解し、状況に応じて柔軟に対応できるようにしておくことが大切です。
是非、画像ロールオーバー実装時の参考にしてみてください。
