💻 Los mapas de imágenes interactivos (2)

En el ejemplo Crear mapas de imágenes interactivos , ¿CÓMO UBICAR EL TOOLTIP EXACTAMENTE EN EL PAIS A TRABAJAR Y COMO CALCULAR LOS PARAMETROS DE LOCALIZACION?

Calcular las coordenadas al ojo puede ser un dolor de cabeza, pero el truco está en cambiar el chip de píxeles a porcentajes para que el pin se quede pegado en su sitio sin importar el tamaño de la pantalla

Para ubicar tu tooltip y tu pin exactamente en el país que necesitas, la fórmula matemática y el procedimiento que debes seguir es el siguiente:

📐 La Fórmula de Localización

Para calcular los valores de left (horizontal) y top (vertical), aplica esta regla de tres simple basada en las dimensiones originales de tu imagen:

left (X%) = (Posición X en píxeles del país / Ancho total de la imagen en píxeles) × 100

top (Y%) = (Posición Y en píxeles del país / Alto total de la imagen en píxeles) × 100

🛠️ Guía Paso a Paso para Calcularlo

1. Abre tu imagen en un editor

Usa cualquier programa de diseño básico (Photoshop, Figma, Canva, Paint) o incluso un visor de imágenes que te muestre las coordenadas en píxeles (px).

2. Identifica el tamaño total

Anota las dimensiones exactas de tu mapa base. Por ejemplo: Ancho total = 1200 px

Alto total = 800 px

3. Obtén las coordenadas del país

Coloca el cursor del ratón justo en el centro del país que quieres marcar y anota los dos valores en píxeles que te da el programa (X e Y) medidos desde la esquina superior izquierda del lienzo:

Ejemplo: Quieres marcar un punto en Venezuela y tu cursor dice que estás en la posición horizontal X = 450 px y en la posición vertical Y = 520 px.

4. Haz la división matemática

Aplica la fórmula anterior con tu calculadora:
left = (450 / 1200) × 100 = 37.5%

top = (520 / 800) × 100 = 65%

5. Aplícalo en tu código CSS

Crea una clase única para ese pin y escribe las coordenadas resultantes:

css.pin-venezuela {

left: 37.5%;
top: 65%;

}

El elemento tooltip vive dentro de ese mismo contenedor del pin (hotspot), por lo que al moverse el pin al 37.5% y 65%, el tooltip se trasladará automáticamente con él sin que tengas que calcular coordenadas extras para el texto.