HTML - Insertar botones en una imagen - MAPA

Buenas tardes, estoy diseñando un mapa para un campo de golf: http://mapagolf.esy.es/
Cada botón se localiza según un left y un top en px. Este mapa luego será insertado en una web con menús y demás.

Tengo los siguientes problemas:
Me gustaría que tanto el tamaño de la imagen del campo como los botones se localizaran por %. El inconveniente es que se descuadran al hacerlo así ya que el tamaño de la imagen se reduce correctamente pero los botones se guían por el top y left de la página.


Mi duda es, hay alguna forma de que los botones de dentro de la imagen se localicen por coordenadas o por un left y un top en referencia a la imagen no a la página para que así se localicen siempre correctamente en cualquier tamaño de mapa.

Un saludo, muchas gracias!

Hola,
quizás este plugins de JQuery, sea lo que necesitas
https://github.com/stowball/jQuery-rwdImageMaps

Un saludo,
David
soluciones web

Hola Igor, la respuesta es si...

Si la capa contenedora es position:relative, las posiciones internas, pueden ser absolute, lo cual hace referencia al contenedor relative...

no se si me he explicado bien...

Posicionamiento mediante CSS

Hola, podrías utilizar el posicionamiento mediante las propiedades de CSS de tus botones y de tu mapa (Imagen). En tu caso podría ser que necesites utilizar el relativo para tu imagen y absoluto para poder posicionar tus botones de la manera que tu necesitas.

Por ejemplo:


El siguiente link puede ayudarte a decidir si necesitas algo diferente a lo que alcanzo a entender de tu situación.
http://www.w3schools.com/css/css_positioning.asp