Entry
How can I make a picture follow the scrolling?
Apr 5th, 2008 19:10
ha mo, Colin Fraser, pef torf,
There is no easy answer to this question, it can be confusing. I have
never gotten a scrolling layer to work in earlier browsers than
*v4, and I doubt they are supported in a lot of other browsers. I think
I got this from the Dynamic Duo, a site that I was not sure still
existed until I noticed in the links on the front page. It is a little
dated, but it should work with a bit of extra work, however, this code
worked for me when I needed it.
Firstly, in the page:
the <HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="remote.js"
TYPE="text/JavaScript">
</script>
This places the script off page, which makes it accessible to all your
pages. Such reusability should be a function of a lot more pages than is
currently the case.
In the <body>
<body bgcolor="#ffffff" text="#000000" vlink="#cacaca"
OnLoad="setPostn();checkPostn();checkBrowser()";>
You can also place background images and all that in the same position,
but just make sure the other calls are in place as well.
The very next tag after the body tag is
<div id="obPic" class="postn">
which creates the layer. The style provides the layer with all the
attributes you require it to have.
In the layer then I used a table.
<table width="12%" border=0 cellspacing=0 cellpadding=5
bgcolor="#D8D8BF">
<tr>
<td><img src="myimage.gif"></td>
</tr>
</table>
Then close the layer
</div>
Then the rest of the document follows inside a gutter.
<div id="obGutter" class="gutter">
.............
In an associated style sheet :
div.gutter { margin-left:125; }
div.postn { position:absolute;
visibility:show;
left:0px;
top:0px;
width:13%;
z-index:1; }
You can change the position of the layer by changing the left and top
values.
In the remote *.js file you can place this code:
// Begin
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block = document.ltitle
if (ie4) block = ltitle.style
}
//navigator.appName == "Netscape")
function setPostn() {
if (ns4) {
a=".top=";
adoc="document.";
docs="";
b="window.pageYOffset";
}
else {
a=".pixelTop=";
adoc="";
docs=".style";
b="document.body.scrollTop";
}
}
function checkPostn() {
object="obPic";
c=eval(b);
eval(adoc+object+docs+a+c);
setTimeout("checkPostn()",5);
}
These functions provide the actual movement, making sure that the div
always remains in the same position in relation to the browser window. I
needed the image to appear in the top left corner of the screen and the
image would scroll down in the gutter. However, you may want to do
something different
Bear in mind that I knew what environment this was going to appear in,
what screen resolutions and all that. While it worked for me, you may
need to tweak it to suit newer browsers.
Good luck
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com
