Trabajar con mapas

En ocasiones puede resultar complicado lograr que los mapas se comporten como deseamos. En este artículo observaremos varios detalles que nos facilitarán trabajar con los mismos.

Tooltips

Supongamos una imagen que tiene asociado un único mapa a una zona rectangular en el centro de la misma. Se trata de una imagen que toda ella hace referencia a un tema mientras que la zona sensible y pulsable con el ratón se reduce a un rectángulo en el centro. Tendríamos este código:

<MAP NAME="map1">
    <AREA SHAPE="rect" COORDS="0,12,104,44"
    HREF="http://www.dondesea.com/blablabla.html">
</MAP>
<img src="image1.gif" width="104" height="55"
    alt="Texto alternativo" USEMAP="#map1" border="0">

Tal como está escrito, al situar el ratón dentro de la imagen pero fuera del mapa el navegador nos mostraría el tooltip "Texto alternativo". Sin embargo, al movernos encima del mapa el tooltip desaparecería, a pesar de que el texto se asignó a la imagen entera. La solución es colocar el texto tanto al mapa como a la imagen:

<MAP NAME="map1">
    <AREA SHAPE="rect" COORDS="0,12,104,44"
    HREF="http://www.dondesea.com/blablabla.html"
    alt="Texto alternativo">
</MAP>
<img src="image1.gif" width="104" height="55"
    alt="Texto alternativo" USEMAP="#map1" border="0">

Otra opción, quizá con mejor comportamiento, es aprovechar el atributo NOHREF de los elementos que definen las áreas:

<MAP NAME="map1">
    <AREA SHAPE="rect" COORDS="0,12,104,44"
    HREF="http://www.dondesea.com/blablabla.html"
    alt="Texto alternativo">
        <AREA SHAPE=DEFAULT NOHREF ALT="Texto alternativo">
</MAP>
<img src="image1.gif" width="104" height="55"
    USEMAP="#map1" border="0">

Cambio de imágenes

Es muy habitual ver páginas con menús que tienen botones que cambian de estado al pasar el ratón por encima y/o al pulsar sobre ellos. Estos efectos, como ya sabemos, se controlan con los eventos onMouseLoqueSea. Lo curioso es que estos eventos se suelen utilizar muy a menudo con imágenes enteras. Un ejemplo típico sería éste:

<img src="image1.gif" width="104" height="55" border="0"
    onMouseOver="activar('img1');"
    onMouseOut="desactivar('img1');"
    HREF="http://www.dondesea.com/blablabla.html"
    NAME="img1">

Que para funcionar, lógicamente, tendrán que haberse definido las funciones activar() y desactivar() en alguna parte de la página.

Sin embargo, si queremos que la imagen cambie sólo al entrar el ratón dentro del mapa, habrá que utilizar los eventos con el mapa en lugar de con la imagen:

<MAP NAME="map1">
    <AREA SHAPE="rect" COORDS="0,12,104,44"
    HREF="http://www.dondesea.com/blablabla.html"
    alt="Texto alternativo"
    onMouseOver="activar('img1');"
    onMouseOut="desactivar('img1');">
    <AREA SHAPE=DEFAULT NOHREF ALT="Texto alternativo">
</MAP>
<img src="image1.gif" width="104" height="55" border="0"
    NAME="img1" USEMAP="#map1">

En la misma línea, se podrían asignar diferentes cambios de imagen dependiendo del área sobre la que entre el ratón utilizando los eventos con cada área:

<MAP NAME="map1">
  <AREA SHAPE="rect" COORDS="0,12,51,44"
    HREF="http://www.dondesea.com/blablabla.html"
    alt="Texto1"
    onMouseOver="activar_1_('img1');"
    onMouseOut="desactivar('img1');">
  <AREA SHAPE="rect" COORDS="52,12,104,44"
    HREF="http://www.otrositio.com/guauguau.html"
    alt="Texto2"
    onMouseOver="activar_2_('img1');"
    onMouseOut="desactivar('img1');">
  <AREA SHAPE=DEFAULT NOHREF ALT="Texto alternativo común">
</MAP>
<img src="image1.gif" width="104" height="55" border="0"
    NAME="img1" USEMAP="#map1">

Para ello deberemos tener definidas las funciones activar_1_(), activar_2_() y desactivar() en alguna parte de la página. Cada una de las 3 funciones asigna a document[imgName].src una de las 3 imágenes necesarias.

En cualquier caso, tiene que haber una concordancia entre el nombre con que se ha "bautizado" a la imagen (etiqueta NAME) y el parámetro que se pasa a las funciones.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO

HAY 8 COMENTARIOS
  • Juan dijo:

    Sería muy bueno que pusieras ejemplos de lo que contás

  • Leo de Floresta dijo:

    No se compliquen mas, si queres trabajar con mapas, hay programas para ello Por ejemplo MapEdit, trabajas en otra plataforma con una interfaz y luego lo traduce automaticamente al codigo HTML Lo podes encontrar en www.download.com Desde ya les mando una beso a todas las chichis(mujeres) del mundo ............. Leo de Argentina...Bye

  • pablito dijo:

    todo esto está muy bien, pero a mi me gustaría saber si alguien me puede decir si los objetos mapas son intercambiables. es decir: Si puedo definir 4 ó 5 mapas en el documento HTML o en un archivo externo, y después con alguna función de javaScript decirle a una imagen que utilice un mapa u otro dependiendo del evento que yo elija. He leido algo de archivos externos con extensión ".map" ¿alguien sabe algo?

  • Fernando dijo:

    Hola deberias de poner ejemplos para ver si realmente funciona todo lo que dices.......

  • Gloria dijo:

    Te lo agradec eria mucho besos

  • Ore dijo:

    Nesesitaria que me pases el codigo de las funciones activar_1_(), activar_2_() y desactivar() o un ejemplo con el codigo completo, el tema es que quiero hacer un mapa y al pasar el mouse por algunos sectores aparescan imagenes

  • AnaLiz dijo:

    No Se si me podrias dar un ejemplo de las funciones que utilizas... lo que pasa es que tengo un trabajo que me dejaron en la escuela para cambiar un mapa de mi localidad y cuando pase por cierto municipio quiero que me aparesca una imagen distinta a la que se tiene

  • eligor dijo:

    Por favor necesito alguna forma de darle un efecto o camio de color a un area de un mapa. Mi problema es q tengo un menu y cuando el usuario haga click en ese menu dependiendo d las opcion seleccionada debo cambiar de color o realizarle algun efecto al area correspondiente. Alguien q me ayude porfa. gracias...

Conéctate o Regístrate para dejar tu comentario.