複数画像にクリッカブルマップ
当方、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>
------
よろしくお願いします。
お礼
再度ソースを確認してみたところ、tk-is-pg_1206さんのご指摘通りパスミスでした。 つまらない質問に回答くださり、ありがとうございました。
補足
Javascriptに対して理解が出来ておらず、配慮しきれていない質問で申し訳ありませんでした。 同ページ内にJavascriptのソースを記載し、反映させて動作を確認すると、正常に反映するんですが、外部でファイルを読み込むと一枚目の画像しか読み込めず、二枚目からは画像が反映されません。 その際の画像のURLなどにもミスはありません。 動作環境はOpera11.51です。