Ancho de mapa de imagen

normanathaly · #1 (**permalink**) 23/06/2011, 20:38

Hola!

Apenas estoy aprendiendo de html y tengo un problema con un mapa de imagen que uso como banner de una galeria, quiero poner la imagen en todo lo ancho de la pagina y pongo widht 100% y funciona, pero los enlaces se mueven d su lugar quedandose en donde estarian en la imagen de tamaño normal, quisiera saber como hacer para q la imagen ocupe todo el ancho y ademas los enlaces queden en su sitio.

Soy nueva en el foro y no se muy bien como funciona, asi q les dejo el codigo, espero q me puedan ayudar. Muchas gracias por adelantado!

</head>

<body bgcolor="#000000" width="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<center>
<img src="AQUI PONGO LA UBICACION DE LA IMAGEN" usemap="#mymap" width="100%" border="0">

<map name="mymap">
<area shape="rect" coords="916,276,977,339" href="PAGINA" src="IMAGEN">
<area shape="rect" coords="914,200,974,260" href="PAGINA" src="IMAGEN">
<area shape="rect" coords="907,120,967,180" href="PAGINA" src="IMAGEN">
</map>

</center>

Uncontroled_Duck · #2 (**permalink**) 24/06/2011, 02:56

Busca algún manual sobre uso de los <div> y css.

Ahí encontrarás la mayoría de las soluciones a problemas de como ubicar las imágenes y el texto en tu web.

emprear · #3 (**permalink**) 24/06/2011, 18:21

las coordenadas representan la posición tomando de partida no la dimension real de la imagen, sino lo que a traves de width y height declares en tu html,

si estas usando 100%, entonces tus coords para el ancho deberían se pasadas tambien en porcentaje y no en pixeles, en cuanto al alto, si ni lo definis y dejas que se autoajuste, tendrias que calcular una imagen escalada al 100% del ancho de página, a cuanto te lleva el alto... pero de que ancho estamos hablando?, de la resolución de pantalla del usuario, obviamente, de que el navegador que use, de si se le genera scroll, vale decir, todo un problema

Soluciones, por lo pronto pasar tus pixeles a porcentajes (no tengo idea si podes expresar poncertajes como 23.32%, por ejemplo) despues podrias detectar la resolución del usuario y tener 3 mapas con las medidas mas estandar, 800x600 1024x768 y 1280 x800... aqunque con tanta laptop, netbook, lcd, etc va a ser un caos

conclusion 1) , apunta a un estandar de 1024 x 768 y hace una imágen de no más de 950 px de ancho
Googlea con jquery maps (ojo, no confundas con los numerosos plugin para usar la Api de Google maps), a lo mejor inventaron algo para esto tambien

SAludos

normanathaly · #4 (**permalink**) 24/06/2011, 21:01

Muchas gracias por sus respuestas!

Ya lei todo un manual de html, pero no encontre la solucion. Lo resolvi colocando un background igual al que utilice en el mapa de imagen con width=100% y con height igual al mapa de imagen y despues coloque el mapa de imagen en el centro asi no se ve la diferencia entre en banner y el background, parece una misma imagen.

Les dejo el codigo por si alguien tiene en mismo problema y les pueda servir

<style type="text/css">
body{
background-image: url('IMAGEN');
background-repeat: repeat-x;
background-position: 0px 29px;
background-color: #000000
}

</style>

<body bgcolor="#000000" width="1074" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<center>
<img src="AQUI PONGO LA UBICACION DE LA IMAGEN" usemap="#mymap" width="1074" border="0">

<map name="mymap">
<area shape="rect" coords="916,276,977,339" href="PAGINA" src="IMAGEN">
<area shape="rect" coords="914,200,974,260" href="PAGINA" src="IMAGEN">
<area shape="rect" coords="907,120,967,180" href="PAGINA" src="IMAGEN">
</map>

</center>