PDA

Click to See Complete Forum and Search --> : How to place an image that moves with the scrollbars?

ozpo1
04-06-2006, 02:57 PM
I want to place an image on the bottom-right side of my screen and when someon will roll the scrollbar, the image will move, and will stay on the same corner. how can I do it?
Thanks, Oz.
Alaska_Raider
04-06-2006, 03:16 PM
Try this

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">



<!-- Begin
function setVariables() {
imgwidth=300; // logo width, in pixels
imgheight=114; // logo height, in pixels
if (navigator.appName == "Netscape") {
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window.innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}
else {
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
}
}
function checkLocation() {
objectXY="branding";
var availableX=eval(innerW);
var availableY=eval(innerH);
var currentX=eval(offsetX);
var currentY=eval(offsetY);
x=availableX-(imgwidth+30)+currentX;
y=availableY-(imgheight+20)+currentY;
evalMove();
setTimeout("checkLocation()",10);
}
function evalMove() {
eval(docStyle + objectXY + styleDoc + horz + "=" + x);
eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
// End -->
</SCRIPT>
</HEAD>


<BODY onload="setVariables(); checkLocation();">



<div id="branding" style="position:absolute; visibility:show; left:335px; top:-50px; z-index:2">
<table width=10 bgcolor=white><td>
<a href="http://www.yoursite.com" onmouseover="window.status='Thanks for visiting!';return true" onmouseout="window.status='';return true"><center><img src="imagename" width="100" height="100" border="0"></center></a></font></td>
</table>
</div>







<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>


</BODY>
</HTML>
felgall
04-06-2006, 03:35 PM
Perfect code for version 4 browsers but almost everyone is using version 6 thru 9 browsers now.My page at http://javascript.about.com/library/blhover1.htm shows how to attach an expandable menu that floats in the bottom right corner as you scroll the page - you could easily substitute anything else for the menu. It contains the code necessary to work with version 4 browsers and more modern browsers.
Alaska_Raider
04-06-2006, 03:44 PM
Thanks...I just had an old one sitting on a cd that I played with years ago...
skilled1
04-06-2006, 05:58 PM
you can also use a DIV tag


<DIV id=banner style="Z-INDEX: 1; RIGHT: 10px; WIDTH: *px; POSITION: absolute; BOTTOM: 10px; HEIGHT: *px"> object here </div> and edit the * to the size of the image.
WebJoel
04-06-2006, 06:52 PM
http://www.howtocreate.co.uk/fixedPosition.html
This works in all browsers, albeit, a little tiny bit 'jerkily' in InternetExploder. Best viewed in Firefox, Opera or Mozilla (non-IE).
ozpo1
04-07-2006, 11:21 AM
Very useful information.