クリッカブルマップを使ったロールオバー、Javascriptで実装できます。
ロールオーバー用のスクリプトを用意する
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]“…というように連番で続け、同じように
ロールオーバーさせるイメージのパスを記述。
——————————————————–
<head>
<script language=”JavaScript” src=”js/rollover.js” type=”text/javascript”></script>
</head>
——————————————————–
rollover.jsを外部ファイルで読み込み、クリッカブルマップを設定
——————————————————–
<!–ロールオーバー前のイメージのパス–>
<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]“の画像をマウスアウト時に呼び出します。
