Home
[Beschreibung]
DHTML Navigation mit Filter- und Zoom- Effekten
[Kompatibilität]
[Code]
<style> .a {z-index:51; position:absolute; height:30; width:170; top:50; left:320; border:#111111 solid 2px; padding:8; background:#000000; font:11; color:#ffffff; -moz-opacity: 0.7 } .as {z-index:50; position:absolute; height:32; width:170; top:50; left:320; border:#111111 solid 1px; filter:progid:DXImageTransform.Microsoft.Shadow(direction=130,color=gray,strength=5); -moz-opacity: 0.7 } .b {z-index:41; position:absolute; height:30; width:170; top:95; left:320; border:#111111 solid 2px; padding:8; background:#000000; font:11; color:#ffffff; -moz-opacity: 0.7 } .bs {z-index:40; position:absolute; height:33; width:170; top:95; left:320; border:#111111 solid 1px; filter:progid:DXImageTransform.Microsoft.Shadow(direction=130,color=gray,strength=5); -moz-opacity: 0.7 } .c {z-index:31; position:absolute; height:30; width:170; top:140; left:320; border:#111111 solid 2px;padding:8; background:#000000; font:11; color:#ffffff; -moz-opacity: 0.7 } .cs {z-index:30; position:absolute; height:33; width:170; top:140; left:320; border:#111111 solid 1px; filter:progid:DXImageTransform.Microsoft.Shadow(direction=130,color=gray,strength=5); -moz-opacity: 0.7 } .d {z-index:21; position:absolute; height:30; width:170; top:185; left:320; border:#111111 solid 2px; padding:8; background:#000000; font:11; color:#ffffff; -moz-opacity: 0.7 } .ds {z-index:20; position:absolute; height:33; width:170; top:185; left:320; border:#111111 solid 1px; filter:progid:DXImageTransform.Microsoft.Shadow(direction=130,color=gray,strength=5); -moz-opacity: 0.7 } .e {z-index:11; position:absolute; height:30; width:170; top:230; left:320; border:#111111 solid 2px; padding:8; background:#000000; font:11; color:#ffffff; -moz-opacity: 0.7 } .es {z-index:10; position:absolute; height:33; width:170; top:230; left:320; border:#111111 solid 1px; filter:progid:DXImageTransform.Microsoft.Shadow(direction=130,color=gray,strength=5); -moz-opacity: 0.7 } </style>
<a href="#"> <div class=a id=1 onmouseover="st1(20,1,101)" onmouseout="st2(80,1,101)">Home</div> </a> <div class=as id=101></div> <a href="#"> <div class=b id=2 name=123 onmouseover="st1(20,2,102)" onmouseout="st2(80,2,102)">News</div> </a> <div class=bs id=102></div> <a href="#"> <div class=c id=3 onmouseover="st1(20,3,103)" onmouseout="st2(80,3,103)">About</div> </a> <div class=cs id=103></div> <a href="#"> <div class=d id=4 onmouseover="st1(20,4,104)" onmouseout="st2(80,4,104)">Contact</div> </a> <div class=ds id=104></div> <a href="#"> <div class=e id=5 onmouseover="st1(20,5,105)" onmouseout="st2(80,5,105)">Guestbook</div> </a> <div class=es id=105></div> <script> <!-- //Browser Sniffer var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; var mozup = (!document.all && document.getElementById) ? 1 : 0; aus(); function st1(a,id,dii){ i=a; i+=17; document.getElementById(id).style.letterSpacing=i/4; document.getElementById(id).style.fontSize=i/2.4; if (ie4up) { document.getElementById(id).style.filter='alpha(opacity='+i+')'; document.getElementById(dii).style.width=document.getElementById(id).offsetWidth; document.getElementById(dii).style.height=document.getElementById(id).offsetHeight; } if (mozup) { b = i/100 document.getElementById(id).style.MozOpacity = b; document.getElementById(dii).style.width = parseInt(document.getElementById(id).offsetWidth, 10); document.getElementById(dii).style.height = parseInt(document.getElementById(id).offsetHeight, 10); } if (i<80) { setTimeout('st1('+i+','+id+','+dii+')',10) } void(0) } function st2(a,id,dii){ i=a; i-=6; document.getElementById(id).style.letterSpacing=i/18; document.getElementById(id).style.fontSize=i/4.5; if (ie4up) { document.getElementById(id).style.filter='alpha(opacity='+i+')'; document.getElementById(dii).style.width=document.getElementById(id).offsetWidth document.getElementById(dii).style.height=document.getElementById(id).offsetHeight } if (mozup) { b = i/100 document.getElementById(id).style.MozOpacity = b; document.getElementById(dii).style.width = parseInt(document.getElementById(id).offsetWidth, 10) document.getElementById(dii).style.height = parseInt(document.getElementById(id).offsetHeight, 10) } if (i>50){ setTimeout('st2('+i+','+id+','+dii+')',51) } //document.getElementById(dii).style.visibility="visible" void(0) } function aus(){ for (z=1;z<=5;z++){ if (ie4up) { document.getElementById(z).style.filter='alpha(opacity=50)'; } if (mozup) { document.getElementById(z).style.MozOpacity = 0.5; } document.getElementById(z).style.letterSpacing=2; } } //--> </script>
Oktay Oeztueter modified by N8i (www.nightfire.ch)
Kopieren Sie bitte den Code; beachten Sie die Copyrightbestimmungen im Quellcode!!