[TransMenu]

















News
About
Contact
Guestbook

DHTML- Navigation mit Transparenzeffekt.

[Code]

[zwischen <HEAD> und </HEAD>]

<style>
.a{z-index:10;position:absolute; height:40;width:150;top:50;left:320;border:#cccccc solid 1px;padding:5;background:#ffeeee;font:11;color:#000000;filter='alpha(opacity=70)';-moz-opacity:0.7}
.b{z-index:9;position:absolute;height:40; width:150;top:95;left:320;border:#cccccc solid 1px;padding:5;background:#eeeeff;font:11;color:#000000;filter='alpha(opacity=70)';-moz-opacity:0.7}
.c{z-index:8;position:absolute;height:40; width:150;top:140;left:320;border:#cccccc solid 1px;padding:5;background:#eeffff;font:11;color:#000000;filter='alpha(opacity=70)';-moz-opacity:0.7}
.d{z-index:7;position:absolute; height:40;width:150;top:185;left:320;border:#cccccc solid 1px;padding:5;background:#ffffee;font:11;color:#000000;filter='alpha(opacity=70)';-moz-opacity:0.7}
.e{z-index:6;position:absolute; height:40;width:150;top:230;left:320;border:#cccccc solid 1px;padding:5;background:#ffeeff;font:11;color:#000000;filter='alpha(opacity=70)';-moz-opacity:0.7}
</style>

Hinweis: Passen Sie die Style- Angaben dem Design Ihrer Website an...

[zwischen <BODY> und </BODY>]

<a href="#"><div class=a id=1 onmouseover="st1(20,1)" onmouseout="st2(80,1)">Home</div></a>

<a href="#"><div class=b id=2 onmouseover="st1(20,2)" onmouseout="st2(80,2)">News</div></a>

<a href="#"><div class=c id=3 onmouseover="st1(20,3)" onmouseout="st2(80,3)">About</div></a>

<a href="#"><div class=d id=4 onmouseover="st1(20,4)" onmouseout="st2(80,4)">Contact</div></a>

<a href="#"><div class=e id=5 onmouseover="st1(20,5)" onmouseout="st2(80,5)">Guestbook</div></a>


<script>
<!--
/* this script is (c) by oktay oeztueter 2002,
* please contact me before u you this script commercial.
* it's free for testing purposes and for private use
* when you sign my guestbook with your webpage url and email address :-)
* this script was modified by N8i (www.nightfire.ch)
* it works now also correctly with Mozilla browsers */

//Browser Sniffer
var ie4up = (document.all) ? 1 : 0;
var mozup = (!document.all && document.getElementById) ? 1 : 0;

aus();

function st1(a,id){
i=a;
i+=19;
document.getElementById(id).style.letterSpacing=i/9;
if (ie4up) {
document.getElementById(id).style.filter='alpha(opacity='+i+')';
}
if (mozup) {
b = i/100
document.getElementById(id).style.MozOpacity = b;
}
if (i<90) {
setTimeout('st1('+i+','+id+')',1)
}
return(i)
}

function st2(a,id){
i=a;
i-=5;
document.getElementById(id).style.letterSpacing = i/13
if (ie4up)
document.getElementById(id).style.filter='alpha(opacity='+i+')';
if (mozup)
b = i/100
document.getElementById(id).style.MozOpacity = b;
if (i>50){
setTimeout('st2('+i+','+id+')',1)
}
}

function aus(){
for (z=1;z<=5;z++){
if (ie4up) {
document.getElementById(z).style.filter='alpha(opacity=70)';
}
if (mozup) {
document.getElementById(z).style.MozOpacity = 0.7;
}
document.getElementById(z).style.letterSpacing=2;
}
}
//-->
</script>

[Autor]

Oktay Oeztueter
modified by N8i (www.nightfire.ch)

[Download]

Kopieren Sie bitte den Code, beachten Sie die Copyrightbestimmungen im Quellcode!!

Copyright © 1998- Nightfire Webworker Archiv Script No: 587