複数画像にクリッカブルマップ

質問

当方、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>

------
よろしくお願いします。

回答No.1

noname#206842

scriptを使う意味があるのか？・・・よくわかりませんが、CSSに、a:hoverを書けばいいのでは？・・・
background-image:url("");
で、処理できると、思いますが？・・・・

クリカブルマップの、ariaの、リンクに、a:hoverでリンク画像を変更するだけでは？・・・

むやみにscriptを使うと、閲覧者が、Javascriptを切っている場合の処理まで記述することになるのでは？・・・・・
<noscript></noscript>の間に、結局対応するタグ、あるいは、ＣＳＳを記述することになります。

もっと、合理的な処理をした方が、賢明では？・・・

補足

ありがとうございます。

>クリカブルマップの、ariaの、リンクに、a:hoverでリンク画像を変更する

↑
こちらは具体的にどのような記述になりますか？