PDA

Click to See Complete Forum and Search --> : Image To Scroll Down As Viewer Scrolls Down

wpg_diva
10-14-2005, 08:52 PM
Hi !

I am using dreamweaver to make a site and there is one image that I want to float - meaning that I want it to scroll down as the viewer scrolls down. Yes, yes, something like the (in)famous geocities one. I have had several java codes but to no avail for it working.

I know someone out there can help me ... THANK YOU!

Cheers from a frustrated Diva :confused: ,

Wpg_Diva.

PS. Image is .gif format. I made the layer that the image is on "floatlayer".
Fang
10-15-2005, 04:18 AM
This should work for FF, Opera and IE including IE7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Static image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
p {border:1px solid red;height:15em;}
#floatlayer {position:fixed;} /* works for FF, Opera and IE7 */
</style>

<!-- This, conditional comment, MUST be placed after all CSS and JavaScripts -->
<!--[if lt IE 7]>
<script type="text/javascript">
window.onscroll=scrollImage;

function scrollImage() {
// Scroll offset:
var Ypos;
if (document.documentElement && document.documentElement.scrollTop)
Ypos=document.documentElement.scrollTop;
else if (document.body)
Ypos=document.body.scrollTop;
// Window height:
var theHeight;
if (document.documentElement && document.documentElement.clientHeight)
theHeight=document.documentElement.clientHeight;
else if (document.body)
theHeight=document.body.clientHeight;
// Move floatlayer
document.getElementById('floatlayer').style.top=Ypos+'px';
}
</script>

<style type="text/css">
#floatlayer {position:relative;}
</style>
<![endif]-->

</head>
<body>
<p>bla</p>
<img id="floatlayer" alt="apple" src="apple.jpg" height="83" width="125">
<p>bla</p>
</body>
</html>
wpg_diva
10-15-2005, 06:14 PM
Thanks a billion Fang!!!!

I don't think u cud ever comprehend how much this has helped me ...!

I feel REALLY stupid asking u this next question, but I will ask anyways or I won't get my site done: Where wud I insert my image.gif in the code???

I know, I know, I shudn't be designing a site!

Cheers Fang!

Happy Diva :)
Fang
10-16-2005, 01:43 AM
In a similar place as in my example, near the top of the document.
It depends on what you are scrolling and why.
wpg_diva
10-16-2005, 02:24 AM
Hi .. me again. I am scrolling a image = .gif and also another 'box' of text that is going to be right underneathe the image in a layer ie. the image is in a floating layer and that layer is big enuf to contain my image and some text.

Thanks Fang .. So, So, So much.

DIVA
wpg_diva
10-16-2005, 11:14 PM
Thank You Fang!

Your code worked. However, I want the scroll image to be on the right side of the page ... right now it appears on the left. Also, my image is 110X200 and when I used ur code, it only shows part of my image and it is right at the bottom. I need it to be atleast 20% above the end of the page.

I am sorry for been such a pain.

Thank you :)

DIVA
Fang
10-17-2005, 07:43 AM
You could use a fixed background image:

<style type="text/css">
body {
background:url(anImage.jpg) right 80% fixed no-repeat;
}
</style>
sitehatchery
10-20-2005, 11:04 PM
Here's a fabulous website which gives free web development scripts. http://www.dynamicdrive.com/

Have fun!