Sticky Logo

Hier finden Sie alle Zeilen des im Artikel angegebenen Codes und sparen sich so das lästige Abtippen. Um den Code zu verwenden, folgen Sie bitte der Beschreibung im Heft.


<html><head><title>Sticky Menu Bar</title>



<script language=javaScript>
function setVariables(){
if (navigator.appName == "Netscape") {
v=".top=";h=".left=";dS="document.";sD="";
y="window.pageYOffset";x="window.pageXOffset";iW="window.innerWidth";iH="window.innerHeight"

}

else {h=".pixelLeft=";v=".pixelTop=";dS="";sD=".style";
y="document.body.scrollTop";x="document.body.scrollLeft";iW="document.body.clientWidth";iH="document.body.clientHeight"

}
xyz=500


object="logo";
checkLocationA()
}
movex=0,movey=0,xdiff=0,ydiff=0,ystart=0,xstart=0
function checkLocation(){
innerX=eval(iW)-135
innerY=eval(iH)-120
if (document.layers){innerY-=10;innerX-=10}
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"){                     //to stop the switch logo function
eval(dS+object+sD+v+0);               // just
eval(dS+object+sD+h+(-200));           // slash out these lines
object=abc}                              //at the
else xyz=setTimeout("delayLogo()",2000)   // beginning
}

function delayLogo(){
eval(dS+object+sD+v+0);          //
eval(dS+object+sD+h+(-200));      //and these three too
object='logo'                     //
}

</script>
</HEAD>
<body onload="setVariables();checkLocation()" bgcolor="#eeeeee">
<CENTER>New and improved <B>Sticky Logo</B><br><br>
Try your scroll bars to see the effect<br><br>
The logo uses relative positioning<br><br>
and the logo has a time delayed menu display<br>
try mouseover the logo to see the menu
</CENTER>


<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 bgcolor=eeeeee><CENTER><A HREF="javascript:void(0)"; onmouseover="switchLogo('menu')">
<br><br>
<IMG SRC="brand.gif" border=0></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 bgcolor=eeeeee><CENTER><A HREF="javascript:void(0)"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">
Menu One</A></CENTER></td>
</tr>
<tr><td bgcolor=eeeeee><CENTER><A HREF="javascript:void(0)"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">

Menu Two</A></CENTER></td>
</tr>

<tr><td bgcolor=eeeeee><CENTER><A HREF="javascript:void(0)"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">

Menu Three</A></CENTER></td>
</tr>



</table>
</div>



<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
Part way down
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
The End
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.......................................................................................................................................................................................................................................