複数画像にクリッカブルマップ
当方、HTML・CSSは少しだけ分かりますが、javascriptの知識がありません。
添付の画像のように、
ひとつのHTML内に複数の画像を置き、それぞれの中に複数のクリッカブルマップ（ロールオーバーも可能）
を設置したいのですがうまく動きません。。
■javascript （動かず）
if(navigator.appVersion.charAt(0) >=3){
var rolimg = new Array();
for( i = 0 ; i < 10 ; i++ ){
rolimg[i] = new Image();
}
rolimg[0].src= "img/0.jpg"
rolimg[1].src= "img/1.jpg"
rolimg[2].src= "img/2.jpg"
rolimg[3].src= "img/3.jpg"
rolimg[4].src= "img/4.jpg"
rolimg[5].src= "img/5.jpg"
}
function paintRol(dim,cnt){
if(navigator.appVersion.charAt(0) >= 3 ){
document.images[dim].src=rolimg[cnt].src;
}
}
■HTML
<!--ひとつめの画像-->
<img src="img/0.jpg" 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)" />
</map>
<!--ふたつめの画像-->
<img src="img/4.jpg" usemap="#map" name="rollover" />
map name="map" id="map">
<area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',5)" onMouseOut="paintRol('rollover',0)" />
</map>
------
よろしくお願いします。
お礼
エスケープという方法があったのですね。 知りませんでした。勉強不足です。 教えていただいた方法で完璧でした。 的確な回答ありがとうございました。