javascript - 用js模拟悬停几个映射的圆形按钮

Question

我试图通过映射在 ie7 中必须工作的内容来做圆形悬停区域，我快完成了，但我是 JS 的初学者，遇到代码问题当悬停在该区域上时必须为 map 更改 img，首先 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);
}

我需要在这 2 个之后的水平线上有 5 个这样的按钮，如果代码技术它的接缝我会做，请告诉我这个按钮有什么问题以及修复的解决方案。或者，如果它是用更少的 java 或加载外部文件获得接缝结果的最短方法，我将非常感激。一个也很重要，它必须在 ie7 中工作。

提前致谢

Answer 1

属性 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>