Tengo una imagen png de un mapa del Reino Unido, y quiero colocar íconos de pin en las coordenadas del mapa que, al hacer clic, lo redirigirán a una página con más información sobre esa ubicación.
Intenté usar un <map> con <area> , sin embargo, los elementos del área no pueden tener íconos, por lo que puedo decir.
También he intentado posicionar absolutamente un ícono en el mapa, sin embargo, tan pronto como cambio la resolución, mi posicionamiento se arruina.
¿Alguien ha hecho esto antes o tiene alguna idea de cómo hacerlo? Gracias.
He tenido éxito haciendo esto antes de usar el posicionamiento absoluto con porcentajes. Solo necesita ser bastante preciso con sus valores porcentuales. Aquí hay un ejemplo rápido con un marcador PNG sobre Londres, funciona bien cuando lo cambio de tamaño:
.container { max-width: 800px; min-width: 300px; position: relative; } .container img.map { width: 100%; height: auto; } .marker { position: absolute; z-index: 1; width: 8%; } .marker img { width: 100%; height: auto; } .marker.first { top: 74.5%; left: 78.7%; } <div class="container"> <img class="map" src="https://geology.com/world/united-kingdom-map.gif" /> <div class="marker first"> <img src="https://static.thenounproject.com/png/5025-200.png" /> </div> </div>