Varios link en una imagen
Hoy es posible linkear solo una o varias parte de una misma imagen a diferentes destinos, gracias al tag MAP.
Los mapas de imágenes convierten parte de la superficie de un .gif o .jpg en un link a otra dirección. La diferencia de enlazar la imagen a un url específico es que estaríamos tomando la totalidad de la superficie de la imagen, en cambio, utilizando las etiquetas MAP podemos especificar la forma, tamaño y coordenadas sobre la imagen.
Crear las etiquetas no será difícil, lo que puede llevar algo de tiempo es encontrar las coordenadas exactas. El código sería el siguiente:
<img SRC="nombredelarchivo.jpg" USEMAP="#ejemplo" BORDER=0 height=XXX width=XXX>
<MAP NAME="ejemplo">
Luego es necesario especificar la forma y tamaño del sector a linkear.
Las formas puede ser círculos (CIRCLE), rectángulo (RECT) o una polilínea (POLY), y se especifican en la etiqueta SHAPE:
Además, hay que incluir las coordenadas de la superficie de trabajo, relativas de la esquina superior izquierda de las imágenes.
En caso de un círculo serás tres números, separados por comas y entre paréntesis. Los dos primeros especifican las coordenadas X,Y y el tercero el radio.
Para los rectángulos tendremos cuatro valores, los dos primeros marcan las coordenadas del vértice superior izquierdo, y los restantes el ángulo opuesto.
Y para las polilíneas, se dan pares de valores por cada vértice. Obviamente, las dos ultimas deben coincidir con las dos primeras, para cerrar la polilínea.
<AREA SHAPE=CIRCLE COORDS="x,x,x" HREF="http://...">
<AREA SHAPE=RECT COORDS="x,x,x,x" HREF="http://...">
<AREA SHAPE=POLY COORDS="x,x,x,x,x,x,x,x...." HREF="http://...">
Para no volverse monos buscando las coordenadas correctas, existes pequeños programas que lo hacen por nosotros. Solo se debe abrir la imagen y especificar las áreas y los links, y por resultado el programa nos dará el código html listo para incluir en la página.