【jQuery】イメージマップでマウスオーバー効果をつくる方法

画像の一部にリンクなどを描いたときに、イメージマップを使うことがあります。マップ部分にマウスオンした時に効果を出すため、画像をスワップさせるスクリプトをご紹介します。jQueryを利用します。

JavaScript

  $(function(){
    $('area').each(function(){
        var usemap = $(this).parent().attr('name');
        var image = $('img[usemap="#' + usemap + '"]');
        var src_off = image.attr('src');
        var src_on = src_off.replace('_off','_on');
        $(this).hover(function(){
            image.attr('src',src_on);
        },function(){
            image.attr('src',src_off);
        });
    });
  });

HTML

<img src="img/visual_off.png" usemap="#ImageMap" alt="" />
<map name="ImageMap">
    <area shape="rect" coords="219,445,878,557" href="#form" alt="" data-scroll />
</map>

スクリプトの解説

スワップする画像はファイル名の最後に _off がついている画像と _on がついている画像を用意します。

HTML

<img src="img/visual_off.png" usemap="#ImageMap" alt="" />

JavaScript内では、まず、area タグが付いているもの全てについて、name属性から、関連するusemapのついた画像を探しています。

JavaScript

        var usemap = $(this).parent().attr('name');
        var image = $('img[usemap="#' + usemap + '"]');

その画像のsrcから、画像の場所を受け取り、それをOFFの場合の画像とします。
末尾をONに差し替えたものをONの画像として扱います。

JavaScript

        var src_off = image.attr('src');
        var src_on = src_off.replace('_off','_on');

ホバーの第1引数に、ONの画像を、第2引数にOFFを入れて完成です。

JavaScript

        $(this).hover(function(){
            image.attr('src',src_on);
        },function(){
            image.attr('src',src_off);
        });