Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。
画像のロールオーバーは、実装方法がいくつか存在するため、それぞれのメリットやデメリットを実装方法と共に紹介します。
【手法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】HTML属性（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の動作をオフにしている場合は正しく動作しない
まとめ
それぞれの手法の特性を理解し、状況に応じて柔軟に対応できるようにしておくことが大切です。
是非、画像ロールオーバー実装時の参考にしてみてください。