Un mapa de imagen es una imagen especial, una técnica
de interfaz de usuario, en la que un usuario puede hacer clic en cualquier
lugar dentro de una imagen y lo llevará a una URL diferente. Por ejemplo, la
imagen podría ser un mapa de los Estados Unidos, y haciendo clic dentro de las
fronteras de un estado en particular conduce a una página sobre ese estado.
Hay dos tipos de mapas de imágenes:
En el lado del cliente. Cuando un usuario activa una región de un mapa de imágenes en el lado del cliente con un ratón, las coordenadas en píxeles son interpretadas por el navegador y según la región activada selecciona el vínculo especificado y redirecciona al usuario.
En el lado del servidor. Cuando un usuario activa una región de un mapa de imágenes en el lado del servidor, las coordenadas en píxeles son enviadas al agente del lado del servidor especificado por el atributo href del elemento A. El agente del servidor interpreta las coordenadas y realiza alguna acción.
Se prefieren los mapas de imágenes en el cliente que los mapas de imágenes en el servidor por muchas razones:
<html>
<head>
<meta charset="utf-8">
<title>Mapa de imagen</title>
</head>
<body>
<img src="otro_logo.png" width="500" height="500" alt="logo de archilatutoriales" usemap="#map1"/>
<map name="map1">
<area href="https://www.facebook.com/Archilatutoriales-127614434360419/?skip_nax_wizard=true" shape="circle" coords="398,96,46" alt="facebook">
<area href="mailto:archilagraciela@gmail.com" shape="circle" coords="270,433,46" alt="gmail">
<area href="https://www.youtube.com/channel/UC4DZxLD8eveHA6Cg-LmAJoA" shape="circle" coords="395,336,46" alt="youtube">
</map>
</body>
</html>
Hay dos tipos de mapas de imágenes:
En el lado del cliente. Cuando un usuario activa una región de un mapa de imágenes en el lado del cliente con un ratón, las coordenadas en píxeles son interpretadas por el navegador y según la región activada selecciona el vínculo especificado y redirecciona al usuario.
En el lado del servidor. Cuando un usuario activa una región de un mapa de imágenes en el lado del servidor, las coordenadas en píxeles son enviadas al agente del lado del servidor especificado por el atributo href del elemento A. El agente del servidor interpreta las coordenadas y realiza alguna acción.
Los mapas de imágenes del lado del servidor son más
antiguos (ismap), cuando el usuario hace click en alguna zona de la imagen, la
información es enviada al servidor y este decidirá la página a enviar de vuelta. En cambio con
el nuevo atributo usemap de HTML5 se crean mapas de imagen del lado del
cliente, que además de ser más rápidos, generan menos conflictos con la
compatibilidad del navegador-servidor porque todo el proceso se lleva a cabo en
el ordenador del cliente.
La ventaja de los mapas de imágenes del lado del
servidor es que pueden ser visualizados en navegadores antiguos a diferencia de
los mapas de imágenes del lado del cliente que como precisa de una imagen con
el atributo usemap y este es sólo soportado por los navegadores más recientes.
- Son accesibles a las personas que utilizan navegadores no gráficos y personas con alguna discapacidad visual
- Permiten saber en todo momento si el apuntador está sobre una región activa o no
- Crean menos conflictos porque no requiere permisos del servidor
- El tiempo de respuesta es menor, porque no necesitamos enviar los datos ni esperar la respuesta del servidor, ya que todo se lleva a cabo en el ordenador del cliente donde esta el navegador.
<html>
<head>
<meta charset="utf-8">
<title>Mapa de imagen</title>
</head>
<body>
<img src="otro_logo.png" width="500" height="500" alt="logo de archilatutoriales" usemap="#map1"/>
<map name="map1">
<area href="https://www.facebook.com/Archilatutoriales-127614434360419/?skip_nax_wizard=true" shape="circle" coords="398,96,46" alt="facebook">
<area href="mailto:archilagraciela@gmail.com" shape="circle" coords="270,433,46" alt="gmail">
<area href="https://www.youtube.com/channel/UC4DZxLD8eveHA6Cg-LmAJoA" shape="circle" coords="395,336,46" alt="youtube">
</map>
</body>
</html>
