Mapas de imágenes
En este artículo vamos a ver como crear un mapa de una imagen con HTML y su etiqueta <map>.
La idea es tener un imagen en la cual vamos a tener partes o secciones que queremos identificar. Representar un mapa geográfico sería un ejemplo clarísimo, aunque se podría emplear para cualquier tipo de imagen.
Todo esto va a quedar más claro si lo explicamos mediante un ejemplo.
Vamos a tener una imagen que representa las províncias de España. Queremos que al hacer click en cada província se haga una acción predeterminada a esa província.
De esta forma, podríamos construir por ejemplo un directorio de hoteles. Los usuarios o clientes al hacer click en una de las províncias visualizarán un listado de hoteles disponibles en esa província.
Para disponer de esta funcionalidad lo primero que tendremos que hacer es declarar o definir la imagen a mapear como por ejemplo:
<img border="0" width="168" height="149" usemap="#Map" src="mapa.png">
Es importante indicar en la etiqueta de imagen correspondiente a la imagen a mapear el atributo usemap=»#nombre del mapa», para asociar.
Seguidamente definir el mapa sobre esta imagen con todas sus areas:
<map id="Map" name="Map"> <area alt="Cádiz" href="index.php?do=recherche&seek=Cádiz" coords="32,112,46,111,50,120,42,128" shape="poly"> ... </map>
Las etiquetas <map>…..</map> identifican que vamos a crear un mapa de imágenes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa.
Las etiquetas <area> definen las áreas que vamos a poder activar en esa imagen. A esta etiqueta le acompañan los siguientes atributos:
- shape: Establecemos el tipo de área a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular).
- Coords: Indicamos los pares de coordenadas de cada punto del área a activar. Estas coordenadas las podemos averiguar utilizando un programa de edición de imágenes. En las áreas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio.
- Href: Como ya sabe, indica la dirección, entre comillas, de la página web a la que accede si pinchamos en un área determinada.
Lo que te podría resultar más difícil de generar a simple vista son las coordenadas del mapa, es decir, definir que area será la que deseemos. Seguramente habrá muchas herramientes para generar estas coordenadas sobre una imagen pero con Dreamweaver lo podemos generar de una forma fácil. Simplemente tenemos que ir a modo diseño, seleccionar la imagen y acceder a propiedades, allí verás un apartado que pone mapa con diferentes parámetros a rellenar. Lo importante es seleccionar con el ratón el area que deseemos, poner el link, alt y la id del mapa.
Tengo entendido que esto ya no se usa, que algunos navegadores no lo reconocen, es verdad?
Hola Buenas tardes. Muchas gracias por tu aporte.
Quisiera saber como puedo hacer que al hacer clic sobre alguna zona del mapa cambie de color, NO cuando paso el mouse por encima quiero que responda al evento clic y cambie a otro color y cuando le vuelva a dar otro clic vuelva a su color original.
Muchas gracias
Hola como puedo ponerle zoom aun area del map ?
espero una respuesta gracias
Gracias