[TransZoomMenu]















News
About
Contact
Guestbook

DHTML Navigation mit Filter- und Zoom- Effekten

[Code]

[zwischen <HEAD> und </HEAD>]

<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>

[zwischen <BODY> und </BODY>]

<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>

[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: 588