Cómo crear un mapa de imágenes con Dreamweaver

Cómo crear un mapa de imágenes con Dreamweaver

Cómo crear un mapa de imágenes con Dreamweaver

VALORACIÓN DEL ARTÍCULO:
5/5


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.

TAMBIÉN TE INTERESA

dni en el móvil

Oficial: ya es posible llevar tu DNI en el móvil en España

Teníamos tarjetas bancarias, de salud, tarjetas para el transporte… pero faltaba lo más importante: el Documento Nacional de Identidad. Bueno pues desde ya es posible tener el DNI en el móvil en España. El Consejo de Ministros ha aprobado un real decreto que marca un antes y un después en la forma de acreditar la

vivo v50 Lite

Asequible y muy fino en todos los sentidos: sale a la venta el vivo v50 Lite

La marca vivo, de la cual hemos hablado recientemente por su estrategia a futuro con la robótica e IA, ha dado un nuevo paso adelante en la evolución de los smartphones con el lanzamiento del vivo V50 Lite en España. Este dispositivo combina un diseño sofisticado, potencia de alto rendimiento y resistencia excepcional, adaptándose a

estafas con criptomonedas

Estafas con criptomonedas: cómo no caer en ellas

Para bien o para mal, el sector de las criptomonedas ocupa asiduamente titulares en toda la prensa mundial. Y últimamente, las noticias giran en torno a la seguridad, así que no está de más recordar claves o consejos para evitar estafas con criptomonedas. Han pasado ya algunas semanas, pero conviene señalar dos recientes sucesos que

marca vivo

La marca vivo atisba un futuro con robots en nuestras casas

La industria tecnológica avanza a pasos agigantados, y en este escenario, la marca vivo se está postulando desde China como uno de los actores clave en la innovación digital. Durante la Conferencia Anual Boao Forum 2025 for Asia, celebrada en Boao, Hainan, la compañía ha presentado su nueva visión del futuro, marcada por la convergencia

SPC Care

Así funciona SPC Care, la primera app de cuidado de personas mayores en remoto

Presentada en 2024, SPC Care es la primera app en España de cuidado a distancia de los mayores. La solución, exclusiva de la marca para dispositivos SPC, permite a cuidadores y familiares de personas mayores controlar de forma remota el teléfono móvil del usuario sénior mediante la gestión de la completa totalidad de los parámetros del dispositivo para facilitar