Foros del Web - Ver Mensaje Individual

spocnic · #4 (**permalink**) 02/12/2014, 23:01

Ya lo intente pero sin tener éxito hice un ejemplo básico con la mapa de imágenes pero no da los clics...

Aqui lo que hice...

Código HTML:

Ver original<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS</title>     
        
                <!-- JavaScript -->
                <script type="text/javascript" src="js/animacionColores.js"></script>
    </head>
 
    <body>
            <img src="imagenes/ciruclo.png" alt="" width="500" height="500" usemap="#circulo"/>
                <map name="circulo">
                        <area shape="poly" coords="251,346,254,464,119,412,47,313,42,212,88,116,164,55,236,38,244,38" href="#" onclick = "color(this)" data-cuenta = "-1" >
                
                        <area shape="poly" coords="353,63,443,170,444,327,385,408,335,444,283,459,357,64,271,42,264,85,270,254,280,461" href="#" onclick = "color(this)" data-cuenta = "-1">
                </map>
    </body>
</html>

Código Javascript:

Ver originalfunction color(elemento){
    var colores = ["gray", "red", "yellow", "white"],
        cuenta = Number(elemento.dataset.cuenta);
    
    if (cuenta + 1 <= colores.length - 1){
        cuenta++;
    }
    else{
        cuenta = 0;
    }
    
    elemento.style.background = colores[cuenta];
    elemento.dataset.cuenta = cuenta;
    /*elemento.innerText = cuenta + 1;*/
}