|
Page Details >>>
Keeps logo (or text) in the bottom right corner of the browser window as they scroll the page up and down. The logo glides very smoothly when the page is scrolled and looks great. When their cursor is on the logo, a menu appears in its place offering links to different sections of the site. The menu returns to the logo a few seconds after the move the cursor off the menu.
Add the below code to the <body> section of your page:
<script
language="javascript"
type="text/javascript">
function
setVariables()
{
if
(!document.all)
{
v
=
".top=";
h
=
".left=";
dS
=
"document.getElementById('";
sD
=
"').style";
y
=
"window.pageYOffset";
x
=
"window.pageXOffset";
iW
=
"window.innerWidth";
iH
=
"window.innerHeight";
}
else
{
h
=
".pixelLeft=";
v
=
".pixelTop=";
dS
=
"document.getElementById('";
sD
=
"').style";
y
=
"document.body.scrollTop";
x
=
"document.body.scrollLeft";
iW
=
"document.body.clientWidth";
iH
=
"document.body.clientHeight";
}
xyz
=
500;
innerX
=
eval(iW)
-
115;
innerY
=
eval(iH)
-
110;
object
=
"logo";
checkLocationA();
}
movex
=
0;
movey
=
0;
xdiff
=
0;
ydiff
=
0;
ystart
=
0;
xstart
=
0;
function
checkLocation()
{
yy
=
eval(y);
xx
=
eval(x);
ydiff
=
ystart -
yy;
xdiff
=
xstart -
xx;
if
((ydiff
<
(-1))
||
(ydiff
>
(1)))
movey =
Math.round(ydiff
/
10),
ystart -=
movey;
if
((xdiff
<
(-1))
||
(xdiff
>
(1)))
movex =
Math.round(xdiff
/
10),
xstart -=
movex;
eval(dS
+
object +
sD +
v +
(ystart
+
innerY));
eval(dS
+
object +
sD +
h +
(xstart
+
innerX));
setTimeout("checkLocation()",
10);
}
function
checkLocationA()
{
ystart
=
eval(y);
xstart=eval(x);
}
function
switchLogo(abc)
{
if
(abc
==
"menu")
{
eval(dS
+
object +
sD +
v +
0);
eval(dS
+
object +
sD +
h +
(-200));
object
=
abc;
}
else
xyz =
setTimeout("delayLogo()",
2000)
}
function
delayLogo()
{
eval(dS
+
object +
sD +
v +
0);
eval(dS
+
object +
sD +
h +
(-200));
object
=
'logo';
}
function
Go()
{
setVariables();
checkLocation()
}
window.onload
=
Go;
</script>
<div
id="logo"
style="position:absolute;
visibility:show; left:0px; top:-200px; z-index:2">
<table
border=0
cellspacing=10
cellpadding=0
width=100>
<tr>
<td>
<center><br><br><br>
<A
href="javascript:void(0)";
onmouseover="switchLogo('menu')">
Logo
</A>
</center>
</td>
</tr>
</table>
</div>
<div
id="menu"
style="position:absolute;
visibility:show; left:0px; top:-200px; z-index:2">
<table
border=0
cellspacing=10
cellpadding=0
width=100>
<tr>
<td>
<center>
<a
href="http://www.your-web-site-address-here.com/page-one.html";
onmouseover="clearTimeout(xyz)";
onmouseout="switchLogo('logo')">Page
One</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a
href="http://www.your-web-site-address-here.com/page-two.html";
onmouseover="clearTimeout(xyz)";
onmouseout="switchLogo('logo')">Page
Two</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a
href="http://www.your-web-site-address-here.com/page-three.html";
onmouseover="clearTimeout(xyz)";
onmouseout="switchLogo('logo')">Page
Three</a>
</center>
</td>
</tr>
</table>
</div>
|
|
