Cómo crear mapas de imágenes
Un mapa de imagen en HTML es una imagen que permite definir diferentes zonas seleccionables. A cada zona se le asigna una URL que se activará al pulsar con el cursor sobre ella como si de cualquier otro enlace se tratase.
Existen diferentes programas de diseño web que permiten generar fácilmente el código HTML necesario para crear las distintas áreas de la imagen. También es posible crear mapas de imágenes con javascript o con aplicaciones On Line realizadas con cualquiera de los lenguajes de programación existentes. Pero realmente no es tan complicado hacerlo a mano si le echamos un poco de imaginación.
Por ejemplo, mueve el ratón sobre la siguiente imagen y observa la barra de estado del navegador, te indica unos valores. De igual forma si haces clic en cualquier zona de la imagen verás al final de la URL unos valores indicados como ?x,y que indican las coordenadas del punto elegido. Estas coordenadas en pixeles se toman desde la esquina superior izquierda de la imagen. Para esta imagen empiezan en 0,0 y terminan en 350, 250, que corresponde a la esquina inferior derecha.
Pues lo mismo puedes hacer cuando necesites generar un mapa de imagen. Creas un archivo con el nombre que prefieras y extensión .html, por ejemplo, mapa.html. Lo guardas en cualquier carpeta de tu disco duro y lo ejecutas en tu navegador web cuando te haga falta. Lo único a tener en cuenta son las medidas de tu imagen. Para el caso concreto este es el código utilizado:
<html> <head> <title>Test Mapa</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <a href="#"> <img src="mapa.jpg" width="350" height="250" border="0" ismap="ismap" /> </a> </body> </html>
Ahora con nuestro "generador de coordenadas", vamos a obtener las coordenadas de las zonas seleccionables que abren enlaces, pueden ser páginas web, otras imágenes o una dirección de email.
La especificación HTML permite crear áreas en forma de rectángulos, circulos y polígonos. Las áreas se definen con el atributo "shape" (rect, circle, polygon) y "coords" es una lista de coordenadas dependiendo del área definida. Las etiquetas correspondientes en nuestro ejemplo para cada uno de ellos son:
<area shape="rect" coords="108, 20, 227, 118" href="cuadrado.html"> <area shape="circle" coords="51, 137, 36" href="circulo.html"> <area shape="polygon" coords="249, 109, 336, 119, 321, 192, 283, 211, 186, 185, 233, 169" href="poligono.html">
Siendo los números los valores en pixeles para formar las distintas figuras como ya dije antes.
Los valores para rectángulos y polígonos se toman siempre desde la esquina superior izquierda de la figura. Para el rectángulo o cuadrado tomamos dos pares de valores "x, y" siendo "x" el número de pixeles en horizontal "y" el número de pixeles en vertical para cada punto que buscamos. Empezando por la esquina superior izquierda y terminando por la esquina inferior derecha de la figura (monitor), 108, 20, 227,118 esto le dirá al navegador que nuestro rectángulo tiene 119 px de largo por 98 de alto.
Para el circulo se necesitan dos valores, el primero es el par punto central "x, y" y el segundo el radio de la circunferencia. En nuestro caso 51, 137, 36
Para el caso de polígonos es un poco más complicado porque tenemos que tomar los pares de valores "x, y" de cada vertice. Nuestro polígono tiene seis vertices, empezando por el superior izquierdo, son, 249, 109, 336, 119, 321, 192, 283, 211, 186, 185, 233, 169
No es necesaria tanta presición en la medida, se puede hacer aproximadamente, no se notará si hay un pixel de más o de menos.
Vamos a verlo para la imagen de ejemplo.
Este es el código completo que debes poner en tu web, blog de WordPress, Joomla, etc:
<img src="http://dominio.com/mapa.jpg" width="350" height="250" border="0" usemap="#mimapa"> <map name="mimapa" id="mimapa"> <area shape="rect" coords="108, 20, 227,118" href="http://dominio.com/cuadrado.html" target="_blank"> <area shape="circle" coords="51, 137, 36" href="http://dominio.com/circulo.html" target="_blank"> <area shape="polygon" coords="249, 109, 336, 119, 321, 192, 283, 211, 186, 185, 233, 169" href="http://dominio.com/poligono.html" target="_blank"> </map>
Recordar que cada mapa de imagen debe tener un nombre, en este caso "mimapa". Si usas varios en el mismo código identifica cada uno con nombres diferentes.
Este será el resultado, cuando pases el ratón por encima de la zona seleccionable observarás que el cursor del ratón cambia indicando que se trata de un enlace.
