Mapas InteractivosPosiblemente, la forma mas elegante y "profesional" de usar los links en las imagenes sea el mapa interactivo. El problema consiste en que también es la forma mas compleja y trabajosa. Si quieres saltarte este capítulo hasta que domines mejor el tema, yo lo entenderé y no te culparé por ello.
Veo que te interesa lo suficiente como para seguir leyendo, pues vamos allá. El mapa interactivo es, simplemente, un gráfico en el que hemos definido una serie de zonas. Cada una de estas zonas tiene un link asociado que enviará a donde decidamos a quien pique en él con el ratón.
El primer paso para la creación de un mapa es, logicamente, crear una imagen sobre la que trabajar, decidiendo qué zonas corresponderán a cada link. Suponiendo que hayas hecho esto (no es tan facil como parece, pero esto es un curso de Edición Extremadamente Simple de HTML, no de grafismo), el siguiente paso es poner por escrito esas zonas en la siguiente estructura:
<MAP NAME=nombre>
<AREA SHAPE=tipo COORDS=coordenadas HREF=dirección>
...
...
</MAP><MAP> y </MAP> le dicen al navegador donde empieza y acaba la definición del mapa (hasta aquí es facil). Este tag tiene una opción que es NAME=, y que sirve para darle un nombre al mapa. Nombre que luego tendremos que usar (Sin prisas, todo llegará).
<AREA> es un tag que no hay que cerrar y que define una zona concreta de nuestro mapa, la que, al picar con el ratón, nos linkará a un lugar concreto. O sea, que habrá tantos <AREA> como links queramos en nuestro mapa. Veamos sus opciones:
SHAPE= define la forma de esta zona, que puede ser: RECT (Rectangular), CIRCLE (Circular) o POLY (Un polígono cualquiera).
COORDS= indica las coordenadas de la zona que ya definimos en SHAPE=, su valor depende del tipo que escogieramos en esa opción como podemos ver abajo:
En el caso de que usaramos RECT, COORDS= indicará cuatro números separados por comas, los dos primeros son las coordenadas X e Y del vértice superiór izquierdo, y los dos últimos las coordenadas X e Y del inferior derecho.
En el caso de CIRCLE, COORDS= indicará tres números separados por comas, los dos primeros son las coordenadas X e Y del centro del circulo, y el tercero su radio.
Y en el caso de POLY, COORDS= indicará tantos pares de números separados por comas com vertices tenga el poligono. cada par indicando las coordenadas X e Y de un vertice.
HREF=, por último, indica la dirección a la que el link del area indique.
Una vez definidas las zonas, hay que situar la imagen en la peich. esto se hace como para cualquier otra imagen con link, pero con una minuscula y sutil diferencia:
<A><IMG SRC=grafico USEMAP=#nombre></A>
USEMAP= es una opción de <IMG> que hace que el browser sepa que se las vé con un mapa interactivo. y que este mapa se llama lo que hayas puesto en nombre (¡Ajá! Ya sabemos para qué servía la opción NAME= en el tag <MAP>)
Cierto, parece muy complicado pero, como siempre, un ejemplo puede resolver muchas dudas:
<HTML>
<HEAD>
<TITLE>Cuadro</TITLE>
</HEAD>
<BODY>
<MAP NAME="Mapa">
<AREA SHAPE="RECT" COORDS="0, 0, 50, 50" HREF="verde.html">
<AREA SHAPE="CIRCLE" COORDS="75, 75, 25" HREF="violeta.html">
<AREA SHAPE="RECT" COORDS="0, 80, 40, 99" HREF="rojo.html">
</MAP>
Ejemplo de un mapa interactivo. Pica en el cuadro para acceder a las páginas Verde, Violeta y Rojo (También tendrás que crear esas páginas)
<BR>
<CENTER><A><IMG SRC="cuadro.gif" USEMAP="#Mapa"></A></CENTER>
</BODY>
</HTML>
Se puede colocar un texto alternativo en cada zona del mapa usando la opción ALT="Texto en cuestión" en el tag <AREA>, sustituyendo, evidentemente, la frase "Texto en cuestión" por lo que quieras poner.
El problema es que no hay muchos navegadores que reconozcan ALT aplicado a los mapas interactivos. De todos modos, no provoca ningún problema ponerlo y, además, es obligatorio.
Otra opción moderadamente útil es poner en el tag <AREA>, en lugar de HREF=, la orden NOHREF, que le indicará al navegador que picar ahí no linka a ningún sitio.(sí, solo es MODERADAMENTE útil)
También puede interesarte saber que la descripción del mapa puede estar en otra página, o incluso en un archivo de texto plano (como un .TXT) con tan solo poner la dirección completa en el atributo USEMAP= del tag <IMG>. (Como, por ejemplo: USEMAP="directorio/archivo.txt#Mapa"
Por último, solo queda decir que al tag <IMG> se le pueden aplicar los atributos habituales (BORDER, ALIGN, ect.) sin problemas.
Fuente: psicobyte
