模拟悬停与js的几个映射的圆形按钮

Question

我试图做圆圈悬停区域与映射什么必须在ie7中工作，我几乎完成，但我是初学者在JS一个问题的代码什么必须改变IMG的地图当悬停在该地区时，第一个btn工作得很好，但第二个btn不工作。看看病人https://www.mycleverphone.com/sergiu/Q/circle我用了2张图片，当悬停时必须切换。 这里使用它的代码：

JS - 在头部

<script type="text/javascript"> 
function init(){ 
document.getElementsByTagName('area')[0].onmouseover=function(){ 
document.getElementById('but').src='img/circle_number_hover.png'; 
this.onmouseout=function() { 
document.getElementById('but').src='img/circle_number.png'; 
}}} 
if(window.addEventListener){ 
window.addEventListener('load',init,false); 
}else { 
if(window.attachEvent){ 
window.attachEvent('onload',init); 
}} 
</script> 

NTML

<div id="bt"> 
<ul> 
    <li id="circbut1"> 
    <img id="but" src="img/circle_number.png" width="250" height="50" alt="" usemap="#circleBtn1" /> 
    <map name="circleBtn1"> 
     <area shape="circle" coords="25,25,25" alt="1" href="#1"/> 
    </map> 
    </li> 
    <li id="circbut2"> 
    <img id="but" src="img/circle_number.png" width="250" height="50" alt="" usemap="#circleBtn2" /> 
    <map name="circleBtn2"> 
     <area shape="circle" coords="75,25,25" alt="2" href="#2"/> 
    </map> 
    </li> 
</ul> 
</div> 

CSS

#bt { 
padding-bottom: 100px; 
position: relative; 
display: block; 
} 
#bt ul { 
position: absolute; 
float: left; 
    list-style:none; 
} 
#bt ul li img { 
border: none; 
} 
#bt ul li { 
display: block; 
float: left; 
} 
#bt ul li#circbut1 { 
position: absolute; 
clip: rect(0 50px 50px 0); 
} 
#bt ul li#circbut2 { 
position: absolute; 
padding-left: 10px; 
clip: rect(0 110px 50px 60px); 
} 

我需要5按钮这样在水平线这2后，如果代码技术的接缝，我会做，只是打电话给我什么与这一个环节和一个解决方案来解决。 或者，如果它是一个最短的方式来获得接缝结果与较少的Java或加载外部文件，我会非常感激。它也是重要的，它必须在ie7中工作。

预先感谢您

Answer 1

Attribut ID应该只能在一个html文档中使用。

function init() { 
    var i, j = document.getElementsByTagName('area').length; 

    for(i=0;i<j;++i) { 
     document.getElementsByTagName('area')[i]._C_i = i + 1; 
     document.getElementsByTagName('area')[i].onmouseover = function() { 
      document.getElementById('but' + this._C_i).src = 'img/circle_number_hover.png'; 
     } 
     document.getElementsByTagName('area')[i].onmouseout = function() { 
      document.getElementById('but' + this._C_i).src = 'img/circle_number.png'; 
     } 
    } 
} 

你的init（）函数应该看起来像这样。 （除.onmouseover和.onmouseout < =使用addEventLi ...）

现在改变你的HTML代码，这样（的变化：不同的ID）：

<div id="bt"> 
<ul> 
    <li id="circbut1"> 
    <img id="but1" src="img/circle_number.png" width="250" height="50" alt="" usemap="#circleBtn1" /> 
    <map name="circleBtn1"> 
     <area shape="circle" coords="25,25,25" alt="1" href="#1"/> 
    </map> 
    </li> 
    <li id="circbut2"> 
    <img id="but2" src="img/circle_number.png" width="250" height="50" alt="" usemap="#circleBtn2" /> 
    <map name="circleBtn2"> 
     <area shape="circle" coords="75,25,25" alt="2" href="#2"/> 
    </map> 
    </li> 
</ul> 
</div>