Foros del Web » Creando para Internet » HTML »

Ancho de mapa de imagen

Estas en el tema de Ancho de mapa de imagen en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/06/2011, 21:38
 
Fecha de Ingreso: junio-2011
Mensajes: 2
Antigüedad: 5 años, 7 meses
Puntos: 0
Ancho de mapa de imagen

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>
  #2 (permalink)  
Antiguo 24/06/2011, 03:56
Avatar de Uncontroled_Duck
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 5 años, 8 meses
Puntos: 261
Respuesta: Ancho de mapa de imagen

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.
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #3 (permalink)  
Antiguo 24/06/2011, 19:21
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 6 meses
Puntos: 1567
Respuesta: Ancho de mapa de imagen

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 24/06/2011, 22:01
 
Fecha de Ingreso: junio-2011
Mensajes: 2
Antigüedad: 5 años, 7 meses
Puntos: 0
Respuesta: Ancho de mapa de imagen

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>

Etiquetas: anchodeimagen, codigohtml, mapadeimagen, width100%
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:10.