クリッカブルマップを使ったロールオーバー

2012/02/09

Javascript

1枚の画像に複数のリンクを設定する際"クリッカブルマップ(イメージマップ)"を使用することで、複雑な形でもリンク領域を指定できますので結構便利です。
｢このクリッカブルマップ(イメージマップ)で、指定領域にカーソルを合わせた時に画像をロールオーバー出来れば便利かも｣と思ったことはないでしょうか？
ちょっとしたJavascriptで簡単に実装できますので、今回はその方法をデモページも交えて紹介しようと思います。

Keyword：クリッカブルマップ,ロールオーバー,Javascrpt

クリッカブルマップを使ったロールオバー

ロールオーバー用のスクリプトを用意する

rollover.js

/* Rollover Script */

if(navigator.appVersion.charAt(0) >=3){
var rolimg = new Array();
for( i = 0 ; i < 10 ; i++ ){
rolimg[i] = new Image();
}

// ロールオーバー前のイメージのパス
rolimg[0].src= "image/○○○.○○○"
// クリッカブルマップでロールオーバーさせるイメージ1のパス
rolimg[1].src= "image/○○○.○○○"
// クリッカブルマップでロールオーバーさせるイメージ2のパス  
rolimg[2].src= "image/○○○.○○○"
// クリッカブルマップでロールオーバーさせるイメージ3のパス  
rolimg[3].src= "image/○○○.○○○"
}

function paintRol(dim,cnt){
if(navigator.appVersion.charAt(0) >= 3 ){
document.images[dim].src=rolimg[cnt].src;
}
}

補足

“rolimg[0]”の箇所には、ロールオーバー前のイメージのパスを記述します。
そして”rolimg[1]”には、ロールオーバーさせるイメージのパスを記述します。
複数枚ロールオーバーさせるイメージがある場合、”[1]”の箇所を”[2]”や”[3]”…といったように連番で続け、同じようにロールオーバーさせるイメージのパスを記述してやります。

rollover.jsを外部ファイルで読み込み、クリッカブルマップを設定

HTML(rollover.jsの読み込み)

<head>
<script language="JavaScript" src="js/rollover.js" type="text/javascript"></script>
</head>

HTML(クリッカブルマップの設定)

<!--ロールオーバー前のイメージのパス-->
<img src="image/○○○.○○○" alt="○○○" width="○○○" height="○○○" border="0" usemap="#map" name="rollover" />
<!--クリッカブルマップの設定--> 
<map name="map" id="map">
<area shape="poly" coords="○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○" href="#" onMouseOver="paintRol('rollover',1)" onMouseOut="paintRol('rollover',0)" />
<area shape="poly" coords="○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○" href="#" onMouseOver="paintRol('rollover',2)" onMouseOut="paintRol('rollover',0)" />
<area shape="poly" coords="○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○" href="#" onMouseOver="paintRol('rollover',3)" onMouseOut="paintRol('rollover',0)" />

補足

●ロールオーバー前のイメージのパス
ロールオーバー前のイメージのパスを記述します。
続けてusemap=”#map” name=”rollover”を追記します。
(※[1]･･･usemap=”#map”、[2]･･･name=”rollover”)
alt属性には画像が表示出来ない環境向けの代替テキストを、width属性とheight属性には画像の幅と高さをピクセルで、border属性には枠線の太さをピクセルで記述してください(※HTML5では、width属性とheight属性にパーセント単位での指定は認められなくなりました。また、画像のborder属性は値が”0″の場合に限り認められています)。
[1]のusemap属性には、対象となるmap要素のname属性値を#に続けて記述します(※この場合、対象となるmap要素は<map name=”map” id=”map”>で、name属性値は”map”となります。また、map要素に”id属性値”がある場合、name属性値はid属性値と同じでなければいけません)。
[2]のname属性には、area要素内のonMouseOver(マウスオーバー)とonMouseOut(マウスアウト)で指定しているpaintRol内の”rollover”と同じものを記述します。

●クリッカブルマップの設定
shape属性には、リンクを設定する領域の形状を記述します。
・長方形：rect
・円形：circle
・画像全体：default
・多角形：poly

coords属性には、座標を記述します。
[shape属性がpoly(多角形)の場合の記述例]
coords=”頂点1のX座標,同Y座標,頂点2のX座標,同Y座標,…”
※頂点の数だけ続けて記述します。

onMouseOver=”paintRol(‘rollover’,1)”は、rollover.jsに記述した”rolimg[1]”の画像をマウスオーバー時に呼び出します(※数字の箇所をrollover.jsで設定した”rolimg[数字]”と対応させてください)。
onMouseOut=”paintRol(‘rollover’,0)”は、rollover.jsに記述した”rolimg[0]”の画像をマウスアウト時に呼び出します。

以下の”Demo Page”ボタンをクリックするとデモページをご覧いただけます。