none
Mapear de imagen en Web RRS feed

  • Pregunta

  • Hola, os comento lo que pasa, en una web, he insertado un mapa de Huelva, con los municipios delimitados, los diferentes municipios los tenfo tb mapeados con la etiqueta map en htm, de forma que al pasar el cursor por cada municipio, he conseguido que aparezca su nombre.

    Lo que me gustaría conseguir es, que los colores de cada municipio cambiaran tanto al pasar el cursor por encima como al pasar el cursor tb por nombre del municipio colocado a la derecha del mapa.


    ¿alguien me podria decir como se hace eso?
    miércoles, 9 de abril de 2008 10:31

Respuestas

  • Hola,

     

    Una de las maneras de hacerlo es en primer lugar identificar con al atributo ID cada tag Area.

     

    Para modificar el color de cada municipio añade un onmouseover="change_image(38);" onmouseout="hide_image(38);", donde 38 es el identificador de un municipio, por ejemplo.

     

       function change_image (region) {
        var imgSp= document.getElementById("imgSpain");
        imgSp.style.backgroundImage = 'url(imagenes/huelva_' + region + '.gif)';
        imgSp.style.backgroundRepeat = 'no-repeat';
        return true;
       }

     

       function hide_image (region) {
        var imgSp= document.getElementById("imgSpain");
        imgSp.style.backgroundImage = 'url(/imagenes/none.gif)';
        return false;
       }

     

    Y para lo del nombre, lo que tendrás que hacer es que cuando el evento onMouseOver sea lanzado cuando un usuario pase por encima el cursor del nombre colocado a la derecha del mapa lanza el evento onMouseOver del Area correspondiente.

     

    document.getElementById("area38").fireEvent("onmouseover")

     

    Ya me cuentas como te ha ido un saludo.

    sábado, 19 de abril de 2008 11:00
  • Muchas gracias
    martes, 20 de mayo de 2008 9:09

Todas las respuestas

  • Hola,

     

    Una de las maneras de hacerlo es en primer lugar identificar con al atributo ID cada tag Area.

     

    Para modificar el color de cada municipio añade un onmouseover="change_image(38);" onmouseout="hide_image(38);", donde 38 es el identificador de un municipio, por ejemplo.

     

       function change_image (region) {
        var imgSp= document.getElementById("imgSpain");
        imgSp.style.backgroundImage = 'url(imagenes/huelva_' + region + '.gif)';
        imgSp.style.backgroundRepeat = 'no-repeat';
        return true;
       }

     

       function hide_image (region) {
        var imgSp= document.getElementById("imgSpain");
        imgSp.style.backgroundImage = 'url(/imagenes/none.gif)';
        return false;
       }

     

    Y para lo del nombre, lo que tendrás que hacer es que cuando el evento onMouseOver sea lanzado cuando un usuario pase por encima el cursor del nombre colocado a la derecha del mapa lanza el evento onMouseOver del Area correspondiente.

     

    document.getElementById("area38").fireEvent("onmouseover")

     

    Ya me cuentas como te ha ido un saludo.

    sábado, 19 de abril de 2008 11:00
  • Muchas gracias
    martes, 20 de mayo de 2008 9:09