Mantener imagen fija al despasarce por una pagina

Citar

Escrito el 08 Ene 2008 12:51 am

Quisiera saber como se hace para que al hacer scroll (subir y bajar con las barras de desplazamiento) por una página una imagen se mantenga fija en alguno de los margenes y se vea constantemente. Debe ser muy facil pero no se como :lol:

Por Ikuklos

8 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 08 Ene 2008 10:49 am

Un poco vago eres, no?
Google está lleno de respuestas para ese problema en concreto.

Aquí unas pistas:
NOTA: en color, lo dependiente.

Con CSS sencillo, y JavaScript para los modelos IE:

<head>
<script type="text/javascript">
window.onload=function()
__{if(navigator.appName.indexOf('xplore')!=-1)
_____{document.getElementById('fija').style.position='absolute';
______window.onscroll=function()
______{document.getElementById('fija').style.top=document.body.scrollTop+10+'px';
_______document.getElementById('fija').style.left=document.body.scrollLeft+15+'px';
______}
_____}
__}
</script>
<style>
#fija {position:fixed; top:10px; left:15px;}
* html body #fija {position:absolute;}
</style>
</head>
<body>
<div id="fija"><img src="imagen.jpg" /></div>
</body>

NOTA: La compatibilidad creo que está asegurada para los navegadores (y posteriores): Netscape 6, y compatibles (Mozilla...) e Internet Explorer 5.

Y así, con CSS puro (quizá sea lo recomendable).

<head>
<style>
body { margin:0; padding:0; background-image:none; }
* html body { overflow:auto; }
#fija { position:absolute; top:8px; left:8px; width:96px; }
html>body #fija { position:fixed; }
#contenido { position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; }
html>body #contenido { position:static; top:auto; left:auto; width:auto; height:auto; overflow:visible; }
</style>
</head>
<body>
<div id="fija"><img src="imagen.jpg" width="100" /></div>
<div id="contenido">
a<br />a<br />a<br />a<br />a<br />a<br />1<br />a<br />a<br />a<br />a<br />a<br />a<br />2<br />a<br />a<br />a<br />a<br />a<br />a<br />3<br />a<br />a<br />a<br />a<br />a<br />a<br />4<br />a<br />a<br />a<br />a<br />a<br />a<br />5<br />a<br />a<br />a<br />a<br />a<br />a<br />6<br />a<br />a<br />a<br />a<br />a<br />a<br />7<br />a<br />a<br />a<br />a<br />a<br />a<br />8<br />
</div>
</body>

NOTA: No sabría precisar la compatibilidad de este CSS, aunque evidentemente, se respeta para los modernos IE y Mozilla.

Y por dios...
No seas vago, y usa
GOOGLE.
:twisted:

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 08 Ene 2008 08:47 pm

Puedes tambien, si quieres solamente poner una imagen en el fondo de la pagina que se vaya haciendo scroll, usar las propiedades de background en css:

Código :

body{
background: #000 url(imagen.png) no-repeat scroll;
}

http://www.w3schools.com/css/css_background.asp

Por cierto, usa el buscador, que esas dudas ya se han tratado mucho.

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino

Envíale un mensaje privado

The dark places where wolves access internet with 46,6 kbps

Citar

Escrito el 08 Ene 2008 08:49 pm

Perdon, me equivoque en lo de "scroll"

en ves de eso, debes usar "fixed", para evitar el desplazamiento.

Demo aqui: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment

Ahora si, suerte

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino

Envíale un mensaje privado

The dark places where wolves access internet with 46,6 kbps

Citar

Escrito el 10 Ene 2008 05:13 pm

Perdon por la pereza :zzz:

es que normalmente me encuentro con las respuestas muy rapido y si no las encuntro se me olvidan :nif:

asi que mejor pregunto jeje, lo recuerdo para la proxima y me informo un poco más...

Gracias por la ayuda mis camaradas

Por Ikuklos

8 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 12 Sep 2009 01:22 am

Amigo fijate en esta pagina de uruguaypais.com , en el codigo fuente y ya tienes lo que buscas, o en esta otra criollos.org , o en esta otra milavisosgratis.com
slds. :cool:

Por gonpru

22 de clabLevel

Envíale un mensaje privado Email Web

Montevideo, Uruguay

@gonpru

Citar

Escrito el 18 Feb 2010 03:00 am

Haciendole la tarea ...

Por vinnie

16 de clabLevel

Envíale un mensaje privado Web

Mantener imagen fija al despasarce por una pagina

Escribe una respuesta rapida