【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);
    	});