Los mapas de imágenes son una forma emocionante e interesante de animar su sitio web; con ellos, puede cargar imágenes y hacer que partes de esas imágenes sean accesibles a otros activos en línea. Si estás en un apuro y no quieres descargar un editor de mapas de imágenes, crear un mapa con etiquetas HTML es sencillo.
Necesitará una imagen, un editor de imágenes y algún tipo de editor HTML o editor de texto. La mayoría de los editores de imágenes le mostrarán las coordenadas de su mouse cuando señale la imagen. Estos datos de coordenadas son todo lo que necesita para comenzar con los mapas de imágenes.
Creando un Mapa de Imagen
Para crear un mapa de imagen, primero seleccione una imagen que servirá como la base del mapa. La imagen debe ser de "tamaño normal", es decir, no debe usar una imagen tan grande que el navegador la escale.
Cuando inserte la imagen, agregará un atributo adicional que identifica las coordenadas del mapa:
Cuando creas un mapa de imágenes, estás creando un área en la que se puede hacer clic en la imagen, por lo que las coordenadas del mapa deben coincidir con la altura y el ancho de la imagen que seleccionaste. Los mapas admiten tres tipos diferentes de formas:
- rect - un rectángulo o una figura de cuatro lados
- poli: un polígono o figura de varios lados
- círculo - un círculo
Para crear las áreas, debe aislar las coordenadas específicas que pretende 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 rectángulo , asignas solo las esquinas superior izquierda e inferior derecha. Todas las coordenadas se enumeran como x, y (arriba, arriba). Entonces, para la esquina superior izquierda 0,0 y la esquina inferior derecha 10,15 escribiría 0,0,10,15. Luego lo incluyes en el mapa:
Para polígono , mapeas cada uno x, y coordinar 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.
Circulo las formas solo requieren dos coordenadas, como el rectángulo, pero para la segunda coordenada, especifique 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 de la Web 1.0 de la década de 1990 a 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 utilizan hojas de estilo en cascada para controlar la ubicación de las imágenes y los hipervínculos en una página.
Aunque la etiqueta de mapa aún es compatible con el estándar HTML, el uso de dispositivos móviles con factores de forma pequeños puede provocar problemas de rendimiento inesperados con los mapas de imagen. Además, los problemas de ancho de banda o las imágenes rotas pueden analizar el valor de un mapa de imagen.
Entonces, siéntase libre de seguir usando esta tecnología estable y bien entendida, sabiendo que actualmente hay alternativas más eficientes. en boga con diseñadores web.
