eyemovic inc.

Culture blog会社の活動・働き方

2012.07.12

スマホ版 ロールオーバー

PC版 ロールオーバーは、下記の要領でよく行います。

<script>
    $(function(){
        $(‘.imgover’).not(‘[src*=”‘+ ‘_ov’ +’.”]’).hover(function(){
            $(this).stop().attr(‘src’, $(this).attr(‘src’).replace(/\.(gif|jpe?g|png)$/, ‘_ov.$1’));
        },function(){
            $(this).stop().attr(‘src’, $(this).attr(‘src’).replace(/_ov\.(gif|jpe?g|png)$/, ‘.$1’));
        });
    });
</script>

しかし、スマホではマウスカーソルが存在しないため、hover や mouseover が使えません。

そこで、touchstart で変化を与えて、touchend でその解除をします。
この仕組みで画像のロールオーバーも可能ですが、スマホではおもに CSS で装飾します。
よって、下記の例では test というクラスの付与で表示を切り替えています。

<script>
    $(function(){
        $(‘a, input’).bind( ‘touchstart’, function(){
            $(this).stop().addClass(‘test’);
        }).bind( ‘touchend’, function(){
            $(this).stop().removeClass(‘test’);
        });
    });
</script>

CSS での装飾は、たとえばこんな感じです。
グラデーションの開始色と終了色がロールオーバーで反転します。

<style>
    a, input {
        background : -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    }
    a.test, input.test {
        background : -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
    }
</style>

CSS でやれるなら、a:hover じゃなイカ? という疑問があると思います。
しかし、スマホではタッチした指を離した時に a:hover が解除されないので、今回の JavaScript の利用が必要です。

Android では、ページ遷移後に元のページに戻った時、ロールオーバーされっぱなしということがあります。
事前に発生するイベントを利用して、クラス test を解除するとよいでしょう。

<script>
    $(function(){
        $(‘a, input’).click(function(){
            $(this).removeClass(‘test’);
        });
    });
</style>

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。