Question

我试图做圈子悬停区域与映射必须在ie7中工作，我几乎完成但我是JS的初学者得到一个问题代码什么必须改变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

Attribut ID只能在html文档中使用ONCE。

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＆lt; =使用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>

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

1 个答案: