CURSO DE DISEÑO WEB AVANZADO (II)
¿Qué etiquetas usar?

Lo primero que necesitamos para trabajar es elegir la imagen apropiada que nos sirva de mapa. Puede ser un archivo .gif o .jpg. (Si todavía no manejas bien la inclusión de imágenes, puedes echarle un vistazo a la tercera entrega de nuestro tutorial básico). Ahora bien, supongamos que tenemos la imagen semáforo.gif.

¿Supongamos que quiero adjudicarle a cada cuadrado de color un link diferente. Las etiquetas para crear un mapa tienen una estructura similar a las utilizadas para las listas (si no recuerdas esto, ya lo sabes: tutorial básico). Al hacer una lista hay que usar una etiqueta <OL> o <UL>para indicar el comienzo de la lista, una <li> para cada de ítem de la lista y un </ol> o </ul>, según qué se haya usado al principio, para indicar el fin de la lista. Con el mapa se emplea una estructura similar: <map> y </map>para definir el comienzo y el final del mapa y etiquetas <area> (similares a los <ul> <li> de las listas) para establecer los límites de cada una de las zonas de la imagen en las que el usuario puede hacer clic.<map>. , además, lleva un atributo NAME, que sirve para que le pongas un "nombre propio" al mapa que estás creando.

<MAP NAME="mi_primer_mapa">
<AREA...>
<AREA...>
<AREA...>
<AREA...>
</MAP>


Dentro de cada etiqueta <AREA> van algunos atributos o subinstrucciones, que sirven para precisar la zona en cuestión:

Aplicando estos atributos a la etiqueta <AREA>, un ejemplo sería:

<AREA SHAPE="RECT" HREF="pagina.html" COORDS="x,y,x,y">

donde "x,y,x,y" es una serie de números que establece exactamente la ubicación y el tamaño de la zona de cliqueo, algo que explicaremos mejor en la próxima página.

Una vez que están definidas todas las áreas que van a integrar tu mapa, debes cerrar con la etiqueta </MAP> e insertar la imagen que será usada como mapa (en este caso, nuestro semaforo.gif) con la etiquete usual para esto (<IMG>) pero agregándole el atributo USEMAP. El valor indicado en USEMAP debe ser el mismo que en el NAME de <MAP>, de modo que el browser sepa que las zonas creadas en el mapa deben ser aplicadas sobre esa imagen y no sobre otra.

O sea:

<IMG SRC="semaforo.gif" USEMAP="#mi_primer_mapa">

En definitiva, para establecer un link en cada cuadrado de nuestra imagen semáforo.gif, las etiquetas necesarias serán:

<MAP NAME="mi_primer_mapa">
<AREA SHAPE="RECT" A HREF="rojo.html" COORDS="20,20,60,60">
<AREA SHAPE="RECT" A HREF="amarillo.html" COORDS="80,20,120,60">
<AREA SHAPE="RECT" A HREF=MAILTO:verde@kikiriki.com.ar COORDS="140,20,180,60">
<AREA SHAPE="DEFAULT" NOHREF> /MAP>
<IMG BORDER="0" SRC="semaforo.gif" USEMAP="#mi_primer_mapa">

Y el resultado:



En este caso, reservamos el rectángulo azul para establecer un link a nuestra cuenta de correo. Tambien podemos destacar el atributo <...SHAPE="DEFAULT" NOHREF...> que indica que todo el resto de la imagen que no esté encerrada por las figuras no tenga link a ninguna página. Claro que para esto fue necesario sacar las coordenadas de cada uno de los cuadrados e introducirlos dentro del atributo COORDS. Ahora vamos a ver un poco mejor eso.


•¿Cómo trazo las imágenes dentro del mapa?

Guía de lectura
• Introducción
¿Qué figuras puedes usar?


TEMAS RELACIONADOS
Manual de JavaScript para "bajar" a tu computadora
Tutorial de Flash 5
Editores de páginas web fáciles y gratuitos

Todo para tu sitio