Simulación de hover con js para un par de botones circulares mapeados

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>

CO

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

Gracias de antemano

preguntado el 30 de enero de 12 a las 20:01

1 Respuestas

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>

Respondido el 31 de enero de 12 a las 00:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.