Trabajar con mapas

1 . Tooltips
2 . Cambio de imágenes

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.