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

画像の準備

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

通常の画像

ロールオーバー画像

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

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

<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で関数を作成します。マウスオーバー／マウスアウトで引数で指定した画像に入れ替えるだけのシンプルなスクリプトです。

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

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に対応してます。

$(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")
    });
  }
});