Qué saber
• Use una imagen de tamaño normal que el navegador no cambie de escala. También necesitarás un editor de imágenes y un editor de texto o HTML.
• Al insertar la imagen, agregue un atributo adicional para identificar las coordenadas del mapa.
• Por ejemplo:
Este artículo explica cómo crear mapas de imágenes utilizando etiquetas HTML en lugar de un editor de mapas de imágenes. La mayoría de los editores de imágenes le mostrarán las coordenadas de su mouse cuando apunte a la imagen, que son todos los datos que necesita para comenzar con los mapas de imágenes.
Creación de un mapa de imágenes
Para crear un mapa de imágenes, primero seleccione una imagen que servirá como base para el mapa. La imagen debe ser de "tamaño normal", es decir, no debe usar una imagen tan grande que el navegador la escalará.
Cuando insertes la imagen, agregarás un atributo extra que identifica las coordenadas del mapa:
Cuando crea un mapa de imagen, está creando un área en la que se puede hacer clic en la imagen, por lo que las coordenadas del mapa deben alinearse con la altura y el ancho de la imagen que seleccionó. Los mapas admiten tres tipos diferentes de formas:
- rect-un rectángulo o figura de cuatro lados
- poly-a polígono o figura de varios lados
- círculo-un círculo
Para crear las áreas, debe aislar las coordenadas específicas que desea mapear. Un mapa puede constar de una o más áreas definidas en la imagen que, al hacer clic, abren un nuevo hipervínculo.
Para un rectángulo, mapea solo las esquinas superior izquierda e inferior derecha. Todas las coordenadas se enumeran como x, y (sobre, arriba). Entonces, para la esquina superior izquierda 0, 0 y la esquina inferior derecha 10, 15, debe escribir 0, 0, 10, 15. Luego lo incluyes en el mapa:
Para un polígono, mapea cada coordenada x, y por separado. El navegador web conecta automáticamente el último conjunto de coordenadas con el primero; cualquier cosa dentro de estas coordenadas es parte del mapa.
Las formas circulares solo requieren dos coordenadas, como el rectángulo, pero para la segunda coordenada, especifica el radio o la distancia desde el centro del círculo. Entonces, para un círculo con el centro en 122, 122 y un radio de 5 escribirías 122, 122, 5:
Todas las áreas y formas pueden incluirse en la misma etiqueta de mapa:
Consideraciones
Los mapas de imágenes eran mucho más comunes en la era Web 1.0 de la década de 1990 hasta principios de la década de 2000: los mapas de imágenes a menudo formaban la base de la navegación de un sitio web. Un diseñador crearía algún tipo de imagen para indicar los elementos del menú y luego establecería un mapa.
Los enfoques modernos fomentan el diseño receptivo y usan hojas de estilo en cascada para controlar la ubicación de imágenes e hipervínculos en una página.
Aunque la etiqueta del mapa todavía es compatible con el estándar HTML, el uso de dispositivos móviles con factores de forma pequeños puede generar problemas de rendimiento inesperados con los mapas de imágenes. Además, los problemas de ancho de banda o las imágenes rotas hacen que el valor de un mapa de imágenes sea discutible.
Entonces, siéntase libre de seguir usando esta tecnología estable y bien entendida, sabiendo que existen alternativas más eficientes actualmente en boga entre los diseñadores web.
