スマートフォンサイトで画像をロールーオーバーさせる方法

nerimanKWS
2014.02.28

はじめに

PC・スマートフォンの両方に対応しているサイトを構築する場合、PCでできていた画像のロールオーバーがスマートフォン（主にiPhone）になると効きません。これは、ロールオーバーに使用しているonmouseoverイベントとonmouseoutイベントがスマートフォンにはないためです。

この問題を解決する方法として、スマートフォンにあるtouchstartイベントとtouchendイベントを利用するものがあります。ところが、「スマートフォンサイト　ロールオーバー」検索して見つかるスクリプトは、addClass()やremoveClass()を使って、クラスの付与によって実現しているものがほとんどです。

弊社のPC用サイトでは、画像名_off.png あるいは画像名_on.png という名前をスクリプトで置換することでロールオーバーを実現しています。スマートフォンサイトもなんとか同じ方法で実現したいものです。
そうすれば、スマートフォン用にロールオーバーの画像を用意する手間が省くことができるからです。

下記は、リンクにCSSで画像を表示させている例です。

HTMLコード

 <a href="/value" id="banner01" class="rollover"></a>

ロールオーバーさせたい画像には一意なIDとクラス名rolloverを付与するようにします。

CSSコード

#banner01 {
    width: 160px;
    height: 48px;
    display: block;
    background-image: url('../images/banner01_off.png');
    background-size: 160px 48px;
  }

background-imageには画像名_off.拡張子の画像ファイルを指定します。これをJavaScriptによって、タッチした時だけ、画像名_on.拡張子の画像名に置換します。

JavaScriptコード

/**
 * ロールオーバー時に画像のon,offを切り替える
 */
function imageRollover() {
        var anchors = jQuery.find(".rollover");

        for (var i = 0; i < anchors.length; i++) {
            anchors[i].addEventListener("touchstart", function(e){
                var elem = jQuery('#' + this.id);
                elem.css('background-image', elem.css('background-image').replace("_off.", "_on."));
            }, false);

            anchors[i].addEventListener("touchend", function(e){
                var elem = jQuery('#' + this.id);
                elem.css('background-image', elem.css('background-image').replace("_on.", "_off."));
            }, false);
        }
}

上で定義した関数を初期化時に読み込みます。

// 初期化コード
jQuery(function ($) {
    // 画像のロールオーバー
    if (window.addEventListener) {
        window.addEventListener("load", imageRollover, false);
    }
    else if (window.attachEvent) {
        window.attachEvent("onload", imageRollover);
    }
}

執筆者：カニ
消費税増税まで残り１ヶ月。