Hubo un momento en la historia del diseño web en el que muchos sitios utilizaron una característica conocida como «mapas de imágenes». Esta es una lista de coordenadas adjuntas a una imagen específica de una página. Estas coordenadas crean áreas de hipervínculo en esa imagen, añadiendo «puntos calientes» a un gráfico, cada uno de los cuales puede ser codificado para enlazar a diferentes lugares. Esto es muy diferente a añadir una etiqueta de enlace a una imagen, lo que haría que todo el gráfico se convirtiera en un gran enlace a un único destino.

Ejemplos: Imagine tener un archivo gráfico con una imagen de los Estados Unidos. Si quieres que cada estado sea «clicable» para que vayan a páginas sobre ese estado específico, puedes hacerlo con un mapa de imagen. Del mismo modo, si tiene una imagen de una banda de música, puede utilizar un mapa de imágenes para que cada miembro individual pueda hacer clic en una página posterior acerca de ese miembro de la banda.

¿Suenan útiles los mapas de imágenes? Ciertamente lo eran, pero han caído en desgracia en la web de hoy. Esto se debe, al menos en parte, a que los mapas de imágenes requieren coordenadas específicas para funcionar. Hoy en día, los sitios están construidos para responder y las imágenes se escalan en función del tamaño de una pantalla o un dispositivo. Esto significa que las coordenadas preestablecidas, que es cómo funcionan los mapas de imágenes, se rompen cuando una escala de sitio y las imágenes cambian de tamaño. Esta es la razón por la que los mapas de imagen son raramente utilizados en los sitios de producción de hoy en día, pero todavía tienen ventajas para las demostraciones o los casos en los que se está forzando el tamaño de una página.

¿Quieres 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, así que debe tener algo de experiencia antes de empezar.

Introducción

Vamos a empezar. El primer paso que debe dar es añadir una imagen a su página web. A continuación, haga 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 de zonas activas: rectángulo, círculo o polígono). No olvide nombrar su imagen, lo que puede hacer en la barra de propiedades. Puedes ponerle el nombre que quieras. Use «map» como ejemplo.

Ahora, dibuje la forma que desee en su imagen usando una de estas herramientas. Si necesita puntos rectangulares, utilice el rectángulo. Lo mismo para el círculo. Si desea formas más complejas de zonas activas, utilice el polígono. Esto es lo que probablemente usaría en el ejemplo del mapa de EE.UU. ya que el polígono le permitiría soltar puntos y crear formas muy complejas e irregulares en la imagen

En la ventana de propiedades de la zona activa, escriba o navegue hasta la página a la que debe vincularse la zona activa. Esto es lo que crea esa área enlazable. Continúe añadiendo zonas activas hasta que el mapa esté completo y se hayan añadido todos los enlaces que desee añadir.

Una vez que haya terminado, revise su mapa de imagen en un navegador para asegurarse de que funciona correctamente. Haga clic en cada enlace para asegurarse de que vaya al recurso o página web adecuados.

Desventajas de los mapas de imágenes

Una vez más, tenga en cuenta que los mapas de imágenes tienen varias desventajas, incluso fuera de la mencionada falta de soporte con sitios web sensibles. En primer lugar, los pequeños detalles pueden quedar oscurecidos 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 como para identificar el país de origen del usuario. Esto significa que un mapa de imágenes puede ayudar a determinar si un usuario es de Asia pero no de Camboya en particular.

Los mapas de imágenes también pueden cargarse lentamente. No deben ser utilizados 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ía un serio cuello de botella y un impacto masivo en el rendimiento del sitio.

Por último, los mapas de imágenes pueden no ser fáciles de acceder para los usuarios con problemas visuales. Si ha utilizado mapas de imágenes, también debería crear otro sistema de navegación para estos usuarios como alternativa.

Resultado final

Utilice mapas de imágenes de vez en cuando cuando cuando intente realizar una demostración rápida de un diseño y de cómo funciona. Por ejemplo, si está haciendo una maqueta de un diseño para una aplicación móvil y desea utilizar mapas de imágenes para crear zonas activas que simulen 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 construir páginas web ficticias construidas según los estándares actuales con HTML y CSS. Pero ponerlos en un sitio de producción o aplicación es muy complicado y probablemente debería evitarse en los sitios web actuales.