Hubo un punto en la historia del diseño web en el que muchos sitios utilizaron una función conocida como "mapas de imagen". Esta es una lista de coordenadas adjuntas a una imagen específica en una página. Estas coordenadas crean áreas de hipervínculo en esa imagen, lo que es esencial para agregar "puntos calientes" a un gráfico, cada uno de los cuales se puede codificar para vincular a diferentes lugares. Esto es muy diferente a solo agregar una etiqueta de enlace a una imagen, lo que haría que todo el gráfico se convierta en un gran enlace a un solo destino.
Ejemplos: Imagine tener un archivo gráfico con una imagen de los Estados Unidos. Si deseaba que se pudiera hacer clic en cada estado para que fueran a páginas sobre ese estado específico, podría hacer esto con un mapa de imagen. De manera similar, si tuviera una imagen de una banda de música, podría usar un mapa de imagen para hacer que cada miembro individual pueda hacer clic en una página posterior sobre ese miembro de la banda.
¿Los mapas de imágenes suenan útiles? Ciertamente lo fueron, pero han caído en desgracia en la web de hoy. Esto es, al menos en parte, porque los mapas de imágenes requieren coordenadas específicas para funcionar. Los sitios de hoy están diseñados para ser receptivos y la escala de las imágenes se basa en el tamaño de una pantalla o dispositivo. Esto significa que las coordenadas preestablecidas, que es la forma en que funcionan los mapas de imágenes, se desintegran cuando un sitio se escala y las imágenes cambian de tamaño. Esta es la razón por la que los mapas de imágenes rara vez se usan en los sitios de producción hoy en día, pero aún tienen ventajas para demostraciones o instancias en las que está forzando el tamaño de una página.
¿Quiere saber cómo crear un mapa de imagen, específicamente cómo hacerlo con Dreamweaver? El proceso no es especialmente difícil, pero tampoco es fácil, por lo que debe tener algo de experiencia antes de comenzar.
Empezando
Empecemos. El primer paso que debe tomar es agregar una imagen a su página web. A continuación, harás clic en la imagen para resaltarla. Desde allí, debe ir al menú de propiedades (y hacer clic en una de las tres herramientas de dibujo del hotspot: rectángulo, círculo o polígono. No olvide nombrar su imagen, lo que puede hacer en la barra de propiedades. Puede nombrar Lo que quieras, usa "mapa" como ejemplo.
Ahora, dibuja la forma que deseas en tu imagen usando una de estas herramientas. Si necesitas manchas rectangulares, usa el rectángulo. Lo mismo para el círculo. Si quieres formas de puntos calientes más complejas, usa el polígono. Esto es lo que probablemente utilizaría en el ejemplo del mapa de EE. UU., Ya que el polígono le permitiría colocar puntos y crear formas muy complejas e irregulares en la imagen.
En la ventana de propiedades de la zona activa, escriba o vaya a la página a la que debería vincular la zona activa. Esto es lo que crea esa área enlazable. Continúe agregando hotspots hasta que su mapa esté completo y todos los enlaces que desee agregar hayan sido agregados.
Una vez que haya terminado, revise su mapa de imágenes en un navegador para asegurarse de que funciona correctamente. Haga clic en cada enlace para asegurarse de que va al recurso o página web correspondiente.
Desventajas de los mapas de imagen
Una vez más, tenga en cuenta que los mapas de imágenes tienen varias desventajas, incluso fuera de la falta de soporte mencionada anteriormente con sitios web receptivos. Primero, los pequeños detalles pueden quedar ocultos en un mapa de imagen. Por ejemplo, los mapas de imágenes geográficas pueden ayudar a determinar de qué continente es un usuario, pero estos mapas pueden no ser lo suficientemente detallados para identificar el país de origen del usuario. Esto significa que un mapa de imagen puede ayudar a determinar si un usuario es de Asia pero no de Camboya en particular.
Los mapas de imágenes también pueden cargar lentamente. No deben usarse varias veces en un sitio web porque ocupan demasiado espacio para ser utilizados en cada página de un sitio web. Demasiados mapas de imágenes en una sola página crearían un grave cuello de botella y un impacto masivo en el rendimiento del sitio.
Finalmente, los mapas de imágenes pueden no ser fáciles de acceder para los usuarios con problemas visuales. Si utilizó mapas de imágenes, también debe crear otro sistema de navegación para estos usuarios como alternativa.
Línea de fondo
Utilice mapas de imágenes de vez en cuando cuando intente armar una demostración rápida de un diseño y cómo funciona. Por ejemplo, si se burla de un diseño para una aplicación móvil y desea utilizar mapas de imágenes para crear puntos de acceso para simular la interactividad de la aplicación. Esto es mucho más fácil de hacer de lo que sería codificar la aplicación, o incluso crear páginas web ficticias construidas según los estándares actuales con HTML y CSS. Pero colocarlos en un sitio o aplicación de producción es muy difícil y probablemente debería evitarse en los sitios web de hoy.
