CURSO DE DISEÑO WEB AVANZADO (II)
Cómo marcar zonas dentro de un mapa

Una vez seleccionada la imagen que te va a servir de mapa, es necesario indicar las zonas "activas" sobre las que vas a insertar los hipervínculos. Hay dos formas de hacerlo: la primera implica recurrir a una herramienta especializada, y la segunda, al afamado Bloc de Notas de Windows (o el procesador de textos básico que posea el sistema que uses). Nosotros vamos a optar por la segunda opción, que no sólo no es más complicada sino que además nos permite aumentar nuestros conocimientos sobre HTML (para eso estamos acá, ¿no?).

De todos modos, aquellos que quieran trabajar con editores comerciales como Dreamweaver o Front Page o probar con otras herramientas, pueden recurrir a Tucows/ El Sitio y elegir generadores de mapas para Windows o Mac. Estos programas generan automáticamente el código HTML necesario para hacer un mapa y establecen los hipervínculos. Estas aplicaciones pueden resultar muy útiles si necesitamos crear figuras muy rebuscadas; pero si no es así, con el Bloc de Notas será suficiente.

Un detalle importante: no es necesario cubrir con zonas activas todos los puntos de la imagen que usamos como mapa. Esto es importante, ya que te puedes dar el lujo de no ser exageradamente preciso; puedes dejar espacios en blanco entre una imagen y la otra.
Dijimos que la etiqueta COORDS es la que indica las coordenadas de la zona. Una coordenada es la intersección entre dos puntos sobre dos ejes cartesianos "x" e "y". Las coordenadas se escriben de a pares, primero nombrando el eje "x" y después el "y". El punto de intersección de los dos ejes se ubica siempre en el extremo superior izquierdo y equivale a la coordenada 0,0. Hacia la derecha se extiende el eje "x" y hacia abajo, el "y". Si defines la siguiente serie:

8,2,1,5 estarás definiendo dos coordenadas: (8,2) y (1,5). El resultado será:


Entonces, si vas a introducir un link en tus rectángulos de colores primero debes calcular las coordenadas que definen a cada zona que quieras crear, tomando como referencia el 0,0 del ángulo superior izquierdo de la imagen que estés usando. Hay que tener en cuenta que, como una forma de economizar recursos, para escribir un rectángulo no es necesario definir cuatro coordenadas (una por cada esquina), sino sólo las dos que permitan trazar su diagonal. También es fundamental saber que cada punto del eje corresponde a un pixel (es decir, cada uno de los puntos que compone la imagen en pantalla). El resultado será:

Agreguemos al HTML que habíamos preparado en el paso anterior las coordenadas necesarias para que cada cuadrado de color del semáforo se convierta en una zona de cliqueo:

<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">

La pregunta de rigor es: ¿Qué pasa si quiero utilizar una figura que no sea un rectángulo? Para esto debemos modificar el atributo SHAPE.


• ¿Qué tipo de figuras puedo trazar?

Guía de lectura
• Introducción
¿Qué etiquetas necesito para crear un mapa?


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