クリッカブルマップをロールオーバーをしたい！

質問

画像の一部にクリッカブルマップを配して、その部分のみカーソルを当てると画像が変わるようにしたいのですが、以下の方法を見つけました。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1422869464

ですが、
<div>
<img src="sample_01.jpg" alt="" width="650" height="149" border="0" usemap="#Map3" id="map">
<map name="Map3">
<area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_01_02.jpg')" onmouseout="changeMapImage('sample_01.jpg')">
</map>
</div>
<div>
<img src="sample_02.jpg" alt="" width="650" height="149" border="0" usemap="#Map4" id="map">
<map name="Map4">
<area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_02_02.jpg')" onmouseout="changeMapImage('sample_02.jpg')">
</map>
</div>

このように、クリッカブルを配した画像が続いた場合、なぜか2番目の画像にカーソルを当てると、1番上の画像がロールオーバーされるという。。。
ジャバスクリプト初心者の私にはなぜだか全く分かりません。
他の方法（フラッシュなど）もあるようなのですが、この方法で解決方法を教えて頂けますでしょうか？

どうぞよろしくお願いいたします。

回答No.1

yyr446 · ベストアンサー

<img>のID属性がだぶっているからです。
もっとも単純でおばかな対処方法
<script type="text/javascript">
<!--
function changeMapImage1(url) {
document.getElementById('map1').src = url;
}
function changeMapImage2(url) {
document.getElementById('map2').src = url;
}

//-->
</script>
<div>
<img src="sample_01.jpg" alt="" width="650" height="149" border="0" usemap="#Map3" id="map1">
<map name="Map3">
<area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage1('sample_01_02.jpg')" onmouseout="changeMapImage1('sample_01.jpg')">
</map>
</div>
<div>
<img src="sample_02.jpg" alt="" width="650" height="149" border="0" usemap="#Map4" id="map2">
<map name="Map4">
<area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage2('sample_02_02.jpg')" onmouseout="changeMapImage2('sample_02.jpg')">
</map>
</div>

お礼

できました～！！
ありがとうございます。