sábado, 12 de septiembre de 2026

💻 Mapa de Imagen HTML (1)

See the Pen Ejemplo de Mapa Interactivo. Canadá, Haití y Guyana Francesa by Angel Paz (@angelpaz1960) on CodePen.

Para replicar el efecto interactivo de la "Imagen resumen de las propiedades de la canela" [ ver] (donde al pasar el cursor sobre un punto o "nube" se despliega información), la tecnología estándar de la web utiliza un concepto llamado Mapa de Imagen HTML (<map>) combinado con CSS y JavaScript.

A continuación, se presenta una guía completa paso a paso, explicada de forma tan sencilla que hasta un niño puede entenderla, diseñada para que puedas aplicarla a cualquier imagen que elijas.

🛠️ Elementos necesarios y sus definiciones

Para lograr este efecto interactivo, necesitamos tres herramientas que trabajan en equipo:

HTML (El Esqueleto): Define la imagen y las zonas invisibles que se pueden tocar o clickear (llamadas areas).

CSS (El Traje/Diseño): Esconde los textos informativos por defecto y hace que aparezcan con un diseño bonito ("nubes" o tooltips) solo cuando el ratón pasa por encima.

JavaScript (El Cerebro): Detecta exactamente cuándo el ratón entra o sale de una zona para ordenar al CSS que muestre o culte la información.

🪜 Guía paso a paso (Teoría universal)

Paso 1: Elegir la imagen base y el lienzo

Cualquier autor puede escoger la imagen que desee reseñar (un cuerpo humano, un motor, o un mapa). Esta imagen debe tener unas dimensiones fijas (por ejemplo, 800 píxeles de ancho) para que las zonas interactivas no se muevan de su lugar.

Paso 2: Encontrar las coordenadas (El mapa del tesoro)

Cada punto de la imagen tiene una dirección matemática basada en píxeles: X (distancia desde la izquierda) e Y (distancia desde arriba). Para crear una "zona interactiva", necesitas saber dónde empieza y dónde termina. Esto se puede hacer midiendo la imagen en Paint, Photoshop o usando herramientas gratuitas en línea como Image-Map.net.

Paso 3: Crear los contenedores de información (Tooltips)

Son pequeñas cajitas de texto que flotarán sobre la imagen. Al principio están ocultas (display: none; en CSS).

Paso 4: Programar la interactividad

Usamos eventos del ratón: mouseenter (cuando el puntero entra a la zona) activa el cuadro de texto, y mouseleave (cuando el puntero se va) lo vuelve a esconder.

🌎 Ejemplo práctico: Países Francófonos en América

Vamos a aplicar la teoría con el ejemplo solicitado: Un mapa de América con "nubes" interactivas que señalan territorios donde se habla francés.

Código HTML (El Esqueleto)

Guarda este código en un archivo llamado index.html

___________________ Mapa Interactivo de América Francófona

Países y Territorios Francófonos en América

Pasa el ratón sobre los puntos rojos parpadeantes para descubrir la información.

Mapa Político de América EOM

Canadá (Quebec)

El francés es el idioma oficial en la provincia de Quebec. Es el núcleo de la cultura francófona en el norte del continente.

Haití

Ubicado en el Caribe. El francés es uno de sus idiomas oficiales junto al criollo haitiano, herencia de su historia colonial.

Guayana Francesa

Situada en América del Sur. Es un territorio de ultramar de Francia. Se utiliza el euro y alberga el principal centro espacial europeo.

Países y Territorios Francófonos en América

Pasa el ratón sobre los puntos marcados para descubrir la información.

Canadá (Quebec)

El francés es el idioma oficial en la provincia de Quebec. Es el núcleo de la cultura francófona en el norte del continente, manteniendo vivas sus tradiciones, leyes y educación en este idioma desde la época colonial.

Haití

Ubicado en el Caribe, es la primera república negra independiente del mundo. El francés es uno de sus idiomas oficiales junto al criollo haitiano, herencia de su historia colonial y su rica mezcla cultural caribeña.

Guayana Francesa

Situada en América del Sur, no es un país independiente, sino un territorio de ultramar de Francia. El francés es el idioma oficial absoluto, se utiliza el euro y alberga el principal centro espacial europeo.

3. El mapa de coordenadas interactivas (Zonas invisibles sobre la imagen) --> Canadá Haití

⚠️ Errores comunes y cómo eliminarlos

Las nubes aparecen en lugares equivocados cuando cambia el tamaño de la pantalla:

Solución: Asegúrate de que el contenedor .contenedor-mapa tenga la propiedad position: relative; y la imagen no tenga tamaños que varíen en porcentajes (%) sin actualizar las coordenadas.

La zona interactiva no responde al pasar el ratón:

Solución: Verifica que el ID del mapa (<map name="mi-mapa">) coincida exactamente con el atributo de la imagen (usemap="#mi-mapa"). No olvides el símbolo #.

Los textos se quedan superpuestos o no se borran:

Solución: El evento mouseleave en JavaScript es obligatorio. Si el usuario mueve el ratón muy rápido, a veces el navegador lo ignora; usar librerías modernas o transiciones CSS de opacidad (opacity) previene este error.

📜 Guía de buenas prácticas

Diseño adaptativo (Responsive): Si tu página web se va a ver en teléfonos celulares, las coordenadas fijas en píxeles fallarán. Usa scripts complementarios de código abierto como RWD Image Maps para que las coordenadas se adapten automáticamente al tamaño de la pantalla.

Accesibilidad (Alt): Añade siempre el atributo alt a cada etiqueta <> para que los lectores de pantalla de las personas con discapacidad visual puedan saber qué parte de la imagen se está describiendo.

Optimización de imágenes: Comprime la imagen base en formatos modernos (como .webp) para que cargue instantáneamente y no retrase la aparición de los elementos interactivos.

________________________________________

Adaptación Responsiva Absoluta (Móviles, Tablets y Pantallas Grandes)

Aquí tienes la continuación de la guía, estructurada como un punto adicional completamente independiente, para hacer que tu mapa interactivo sea 100% responsivo y se adapte perfectamente desde pantallas de teléfonos móviles hasta monitores gigantes.

Para que el mapa interactivo no se rompa en pantallas más pequeñas o se vea minúsculo en pantallas gigantes, debemos cambiar el enfoque de dimensiones fijas en píxeles (px) a un enfoque proporcional basado en porcentajes (%) y técnicas de escalado vectorial (SVG).

El Concepto Clave: El contenedor proporcional

La clave de este código es la propiedad CSS padding-bottom: 56.25%; (u otra proporción según tu imagen). Esto crea un contenedor que mantiene una relación de aspecto fija (en este ejemplo, 16:9). El mapa SVG dentro de él se estirará de forma fluida sin perder la precisión de los puntos interactivos.

Código Completo CSS Responsivo

Añade este bloque de código CSS. Reemplaza o complementa el CSS anterior sin alterar el HTML ni el JavaScript que ya configuraste.

¿Cómo y dónde insertar exactamente este código?

Para que el mapa mantenga sus funciones interactivas en tu plataforma web actual, debes inyectar este CSS en las zonas específicas de administración.

📌 En Plantillas de Blogger

Blogger procesa todo su diseño desde un único archivo XML. Tienes dos opciones para colocarlo:

Opción A (Global - Recomendada). Pasos:
  • 1. Ve al panel de control de Blogger y haz clic en Tema.
  • 2. En el botón naranja "Personalizar", haz clic en la flecha hacia abajo y selecciona Editar HTML.
  • 3. Busca la etiqueta </skin> o </b:skin> (puedes pulsar Ctrl + F para buscarla).
  • 4. Pega el código CSS responsivo justo arriba de esa línea.
  • 5. Guarda los cambios.
Opción B (Solo en la entrada del mapa):

Si solo quieres usar este código en un artículo específico, abre la entrada en modo Vista de HTML. Coloca el código al principio de todo encerrado entre las etiquetas <style> y </style> de esta manera:

📌 En Plantillas de WordPress

WordPress ofrece herramientas nativas y constructores visuales para asimilar código CSS personalizado de forma limpia.

Opción A (El Personalizador Nativo). Pasos:


  • 1. En tu escritorio de WordPress, ve a Apariencia ➔ Personalizar (o Herramientas del sistema según tu tema).
  • 2. Busca la opción llamada CSS adicional o CSS personalizado.
  • 3. Pega el código al final de todo el cuadro de texto.
  • 4. Haz clic en Publicar.

Opción B (Si usas el Editor de Bloques Gutenberg):

1. Dentro de la edición de la entrada o página donde pusiste el mapa, añade un bloque de tipo HTML personalizado.
2. Inserta el código envolviéndolo en etiquetas <style> idéntico a como se explicó en la Opción B de Blogger.

Opción C (Si usas constructores como Elementor o Divi):

1. Selecciona la sección o contenedor donde se aloja el mapa.
2. Ve a la pestaña Avanzado del elemento.
3. Busca la casilla CSS personalizado y pega las reglas directamente allí.

📚 Portales y documentación oficial de apoyo documental y metodológico

Para garantizar que pueda acceder a la documentación oficial, revisar la teoría de fondo y estudiar los estándares técnicos de esta metodología, aquí tiene las 10 fuentes bibliográficas con sus respectivas URL verificadas:

Puedes consultar e investigar más profundamente sobre mapas de imágenes interactivos, HTML5 y maquetación web en los siguientes portales de referencia técnica y divulgativa:

1. MDN Web Docs - Elemento <svg>

Qué contiene: La guía oficial y más completa sobre cómo funciona el contenedor SVG, sus atributos de escala y cómo renderizar gráficos vectoriales en el navegador.

URL: https://developer.mozilla.org/

2. MDN Web Docs - Gráficos vectoriales escalables (SVG)

Qué contiene: Tutoriales paso a paso desde el nivel básico hasta avanzado para entender la coordenadas (viewBox), capas y cómo incrustar SVG dinámicos en HTML5.

URL: https://developer.mozilla.org/

3. W3Schools - SVG Tutorial

Qué contiene: Ejemplos interactivos idóneos para aprender de forma visual el uso de etiquetas como , y cómo reaccionan a los estilos CSS.

URL: https://www.w3schools.com/

4. W3C - Estándar Oficial de Gráficos SVG

Qué contiene: Las especificaciones técnicas de la World Wide Web Consortium (W3C). Es el documento regulador que define las reglas globales de visualización interactiva.

URL: https://www.w3.org

Artículos Especializados y Blogs de Desarrollo (Casos Prácticos)

5. CSS-Tricks - Guía Completa de SVG en la Web

Qué contiene: El artículo de referencia de la comunidad web para hacer mapas interactivos, explicando a fondo el truco del viewBox y cómo evitar que las coordenadas se rompan al redimensionar la pantalla.

URL: https://css-tricks.com/

6. Smashing Magazine - Manipulación de SVG con CSS y JavaScript

Qué contiene: Técnicas avanzadas de optimización y buenas prácticas para inyectar interactividad, eventos del ratón (pointer-events) y ventanas emergentes (tooltips).

URL: https://www.smashingmagazine.com/

7. A List Apart - Mapas e Infografías SVG Responsivas

Qué contiene: Ensayos fundamentales escritos por expertos de la industria que detallan cómo el formato SVG se acopla de manera natural a las cuadrículas fluidas del diseño responsivo y la filosofía del diseño adaptativo

URL: https://alistapart.com/

8. Codrops - Técnicas de Animación e Interacción sobre Elementos SVG

Qué contiene: Un catálogo lleno de ejemplos creativos, códigos fuente libres y demostraciones sobre cómo crear puntos de interés interactivos sobre mapas y fotografías reales.

URL: https://tympanus.net/

9. SitePoint - Cómo Crear Mapas Interactivos con SVG

Qué contiene: Un tutorial detallado que explica la teoría cartográfica detrás del mapeo digital y cómo conectar los eventos de JavaScript a regiones vectoriales específicas

.URL: https://www.sitepoint.com/

10. LogRocket Blog - Estilos y Tooltips en SVG Interactivos

Qué contiene: Una guía moderna enfocada en resolver errores comunes de desalineación en pantallas de celulares y la correcta gestión de los cuadros de texto emergentes usando CSS puro.

URL: https://blog.logrocket.com



at
Labels:

No hay comentarios.:

Publicar un comentario

Nota: sólo los miembros de este blog pueden publicar comentarios.

Suscribirse a: Comentarios de la entrada (Atom)