problemilla con imagen

andresbetancourt · #1 (**permalink**) 11/11/2009, 17:21

hola a todos

espero esten bien

ya llevo dos dias con este problemita y he buscado arto en la web e intentado varias
cosas, no puedo decir todo porque si lo hubiera hecho todo ya habria solucionado mi problemita

bueno les cuento:

quiero una cabecera fija para mi web y esa cabecera es una imagen y la quiero fixed
osea fija, pero no se si se pueda es decir, por ahi lei que para poder monipular con javascript el posicionamiento de una imagen esta debe estar con position absolute
no creo pero eso decia el autor, tal vez ustedes me aclaren este punto mejor.

bueno el caso es que tengo en el body una simple imagen

y en el javascript tengo un codigo que supuestamente deberia centrar la imagen de la cabecera de la imagen sin importar la resolucion del monitor que tenga el internauta

aca les paso el codigo que es una pequeñes:

Nota la imagen tiene de ancho 800 px por eso la siguiente linea

var ubicacion = (ancho/2)-400;

pues divide el ancho de la imagen en dos y luego le resta 400 para poder obtener el punto exacto donde se debe situar la imagen segun el atributo left

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BAXILISCO</title>

<script type="text/javascript">




function resolucion()

{

var imagen = null;

var ancho=screen.width;

var alto=screen.height;

var ubicacion = (ancho/2)-400; 

document.images.cabecera.style.left = ubicacion;



alert("ubicacion" + ubicacion);
}


</script>



</head>
<body onLoad=resolucion();>


<img id="cabecera" style="position:fixed; left:0px" src="imagenes/cabecera/cabecera.png" />




</body>
</html>

tambien he cambiado

esto

<img id="cabecera" style="position:fixed; left:0px" src="imagenes/cabecera/cabecera.png" />

por esto

<img id="cabecera" style="position:absolute; left:0px" src="imagenes/cabecera/cabecera.png" />

y nada

tambien he cambiado esto

<img id="cabecera" style="position:fixed; left:0px" src="imagenes/cabecera/cabecera.png" />

por esto

<img name="cabecera" style="position:fixed; left:0px" src="imagenes/cabecera/cabecera.png" />

y nada

he cambiado este codigo javascript

document.images.cabecera.style.left = ubicacion;

por este

var cuerpoRef = document.getElementsByTagName("img");

var imagen = cuerpoRef[0];

imagen.style.left = (ancho/2)-400;

y nada

y muchas otras convinaciones pero nada

ojala me puedan ayudar

zerokilled · #2 (**permalink**) 11/11/2009, 17:44

primero, entiendase que el script toma las medidas en relacion a la resolucion de monitor el cual puede ser diferente a las dimensiones del viewport (area donde se renderiza los documentos web) del navegador. recuerdo haber visto alternativas completamente realizadas en CSS. al menos no conozco cuando compatible es pero me funciona en Fx 3.5, chrome 2, iexplorer8, safari 4 (en win32), netscape 9, y opera 10. fijate el juego que hace entre las propiedades left y margin-left.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<style type='text/css'>
body{
background:#369;
height:1000px;
}
div{
background:#ACE;
width:700px;
height:400px;
position:fixed;
left:50%;
margin-left:-350px;
}
</style>
</head>

<body>
<div></div>
</body></html>

andresbetancourt · #3 (**permalink**) 11/11/2009, 19:59

zerokilled

muchas gracias por tu respuesta funciona super bien

pues esto es como la programacion todo se puede hacer de diversas formas

jejeje y pues tu la pensaste mas facil que yo

pero seria interesante saber porque de la forma q yo lo estaba haciendo no fucionaba

y si es verdad que para manipular imagenes en cuanto a la posicion en el navegador
solo se puede hacer con position absolute o tambien con fixed

gracias si alguien sabe hacerlo como yo lo estaba haciendo seria bueno aclarar la duda

gracias de nuevo zerokilled

zerokilled · #4 (**permalink**) 11/11/2009, 20:23

Cita:

... por ahi lei que para poder monipular con javascript el posicionamiento de una imagen esta debe estar con position absolute
no creo pero eso decia el autor, tal vez ustedes me aclaren este punto mejor.

es parcialmente correcto tu acierto. cualquier elemento es afectado por cualquiera de las coordenadas (top, right, bottom, left) cuando el valor de position es cualquiera que no sea static. o sea, inicialmente todos los elementos tienen como valor static en position. es un detalle extra, no tiene que ver nada con el problema real del script.

el problema es que no estas indicando la unidad al valor de left. al navegador no conocer que unidad emplear éste practicamente ignora el valor. por algun lado habia leido una vez que cuando la unidad se omite el navegador lo interpreta como pixeles pero nunca lo habia comprobado, o no se si son algunos navegadores o los antigüos. el problema que has mostrado desmiente dicho aseveracion.

Código:

document.images.cabecera.style.left = ubicacion; // aqui falta la unidad, lo mas obvio seria pixeles;
                                                 // ubicacion + "px";

en javascript, todos los valores css son string aunque es valido asignar un integer, pero de nuevo, casi siempre tienes que indicar la unidad. en el unico caso donde no tienes que indicar unidad es cuando el valor es cero (0) porque cero es igual sin importar la unidad.

andresbetancourt · #5 (**permalink**) 11/11/2009, 21:16

zerokilled

de nuevo muuuchas gracias

tenias toda toda la razoon

wau que detallito de razon la consola de errores de firefox me estuvo marcando

que no reconocia left

y yo no tenia idea del por que, pero era exactamente lo que dijiste falto los px

gracias de nuevo

Este tema ha sido resuelto