HTML - Insertar botones en una imagen - MAPA

   
Vista:

Insertar botones en una imagen - MAPA

Publicado por Igor S (1 intervención) el 20/05/2016 13:03:00
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!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Insertar botones en una imagen - MAPA

Publicado por DAVID (94 intervenciones) el 20/05/2016 15:53:28
Hola,
quizás este plugins de JQuery, sea lo que necesitas
https://github.com/stowball/jQuery-rwdImageMaps

Un saludo,
David
soluciones web
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Insertar botones en una imagen - MAPA

Publicado por xve (1178 intervenciones) el 20/05/2016 17:54:34
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...

1
2
3
<div style="position:relative">
    <div style="position:absolute;left:20px">a</div>
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Insertar botones en una imagen - MAPA

Publicado por Diego Alberto Z. L. (1 intervención) el 20/05/2016 18:06:33
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:

1
2
3
4
5
6
7
8
9
10
11
div#mapa
{
position:relative;
}
 
button#btnAccion
{
position:absolute;
left:25px;
bottom:25px;
}

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
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar