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