[contact-form-7 id="1781" title="ご意見・ご要望・お問い合せ"]

Technical note

クリッカブルマップでのロールオーバー

2010.01.16

SEO的にはあまり推奨されない?と言われるクリッカブルマップですが、時には便利な場合も。ただ、ロールオーバーさせるのにCSSでは無理があります。そこで非常に簡単な方法ではありますが、javascriptを使ってロールオーバーさせる方法を紹介します。

※2011.09.01:内容の再構成とjqueryでの方法を追加しました。

画像の準備

通常の画像とロールオーバー時の画像を用意します。

test

通常の画像

test

ロールオーバー画像

HTMLでクリッカブルマップの作成

クリッカブルマップを作成出来るHTMLエディタ、ソフトなどでHTMLを生成します。今回はDreamweaverで作成しました。今回の例では以下のソースが生成されます。

HTML
<img src="http://webscripter.jp/wp-content/uploads/2010/01/btn.gif" alt="" usemap="#map" border="0" />
<map name="Map">
  <area shape="circle" coords="101,100,70" href="#" />
</map>

最もシンプルな方法

javascriptで関数を作成します。マウスオーバー/マウスアウトで引数で指定した画像に入れ替えるだけのシンプルなスクリプトです。

Javascript
function changeMapImage(imgPath) {
  document.getElementById('map').src = imgPath;
}

HTML側にはマウスオーバー/マウスアウト時の関数の引数に画像パスをそれぞれ記述します。

HTML
<img id="map" src="btn.gif" alt="test" width="200" height="200" usemap="#Map" border="0" />
<map name="map">
  <area onmouseover="changeMapImage('btn-on.gif')" onmouseout="changeMapImage('btn.gif')" shape="circle" coords="101,100,70" href="#" />
</map>

jQueryを利用した方法

jQueryのhover()を利用して処理をします。よくあるロールオーバーの処理の仕方とほとんど同じです。今回はクリッカブルマップに特化してますが、img、aに任意のclassを指定し、セレクタに追加すれば汎用なロールオーバー処理も可能です。拡張子もgif/jpg/jpeg/xbm/pngに対応してます。

Javascript
$(function(){
  $("area").hover(on, off);
  function on(){
    $('img#map').attr(
        src: $('img#map').attr('src').replace(/^(.+?)(¥.(gif|jpg|jpeg|xbm|png))$/,"$1_f2$2")
    });
  }
  function off(){
    $('img#map').attr(
      src: $('img#map').attr('src').replace(/^(.+?)(?:-on)?(¥.(gif|jpg|jpeg|xbm|png))$/,"$1$2")
    });
  }
});