Question

I trying to do circle hover area with mapping what must work in ie7, I almost finished but I’m beginner in JS an get an issue with code what must change img for map when hover on the area, first btn works great but for second it’s not working. Take a look at patient https://www.mycleverphone.com/sergiu/Q/circle I used 2 image what must switch when hover.
Here its code used:

JS – in head section

<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);
}

I need 5 button like this in horizontal line after this 2, if code technique its seam I will do, just tel me whats rung with this one and a solution to fix.
Or if its a shortest way to get seam result with less java or loading external file I will be really thankful. An also its important, its must work in ie7.

Thank you in advance

Answer 1

The Attribut ID should only be used ONCE in a html document.

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';
        }
    }
}

Your init() function should look like this. (Except .onmouseover and .onmouseout <= use addEventLi…)

Now change your HTML Code to this (change: different ID’s):

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