Floating Image
Version 2.00
written by Gerald Holdsworth

Following on from the Floating Image, this does the same thing but using CSS to keep the image still. The Javascript is simply there to centralise the image on the page and report the co-ordinates of the position.

Click here for a demo

Stylesheet for 'Floating Image':
#floater
{
 background:url('picture.jpg');
 width:256px;
 height:256px;
 position:fixed;
 top:0px;
 left:0px;
 text-align:center;
 z-index:2;
}
Javascript for 'Floating Image':
// You will need to add onload="setUpVars()" into the BODY tag of the HTML document
//
function setUpVars()
{
 var el=document.getElementById('floater');
 var X=(getViewWidth()-el.offsetWidth)/2;
 el.style.left=X+'px';
 var Y=(getViewHeight()-el.offsetHeight)/2;
 el.style.top=Y+'px';
 document.getElementById('coords').innerHTML=getPosition('floater',1)+'px,'+getPosition('floater',0)+'px';
}
function getPosition(id,x)
{
 var obj=document.getElementById(id);
 var topValue= 0,leftValue= 0;
 while(obj)
 {
  leftValue+= obj.offsetLeft;
  topValue+= obj.offsetTop;
  obj= obj.offsetParent;
 }
 if (x==0) finalvalue = topValue; else finalvalue=leftValue;
 return finalvalue;
}
function getViewWidth()
{
 if (typeof window.innerWidth!='undefined')
  w=window.innerWidth;
 else if (typeof document.documentElement!='undefined' && typeof document.documentElement.clientWidth!='undefined' && document.documentElement.clientWidth!=0)
  w=document.documentElement.clientWidth;
 else w=document.getElementsByTagName('body')[0].clientWidth;
 return w;
}
function getViewHeight()
{
 if (typeof window.innerHeight!='undefined')
  w=window.innerHeight;
 else if (typeof document.documentElement!='undefined' && typeof document.documentElement.clientHeight!='undefined' && document.documentElement.clientHeight!=0)
  w=document.documentElement.clientHeight;
 else w=document.getElementsByTagName('body')[0].clientHeight;
 return w;
}

If you would like to email me, put gerald@ in front of the domain name, insead of www..
©2011-2020 Gerald Holdsworth IT Services