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