[ArrowNav]



Link a Link b Link c Link d Link e Link f Link g Link h Link i Link j Link k

Horizontale Navigationsleiste mit animiertem Zeiger

[Code]

[zwischen <HEAD> und </HEAD>]
<!--Hier kann man die Position des Zeigers und der Buttons verändern -->
<STYLE type=text/css>
.clZeiger{position:absolute; height:10; top:82; left:0; z-index:10; font-family:arial,helvetica; font-size:12px}
.clButtons{position:absolute; height:10; top:99; left:0; z-index:10; font-family:arial,helvetica; font-size:12px}
#divZeiger{position:absolute;}

A {
        FONT: bold 10px Verdana, Tahoma, Arial; COLOR: #808080; TEXT-DECORATION: none
}
A:hover {
        COLOR: #ffffff; TEXT-DECORATION: none
}
A:active {
        COLOR: #808080; TEXT-DECORATION: none
}
TD {
        FONT-WEIGHT: bolder
}

</STYLE>
<script language="JavaScript">
<!--
// Browsercheck
function brwcheck() {
        this.ver=navigator.appVersion
        this.agent=navigator.userAgent
        this.dom=document.getElementById?1:0
        this.opera5=this.agent.indexOf("Opera 5")>-1
        this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
        this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
        this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
        this.ie=this.ie4||this.ie5||this.ie6
        this.mac=this.agent.indexOf("Mac")>-1
        this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
        this.ns4=(document.layers && !this.dom)?1:0;
        this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
        return this
}
var bw=new brwcheck()

numItems=10 //avzahl der Links
circleXstart=0 // X startposition des Zeigers
YYY=0 // Y startposition des Zeigers
circlePXspeed=5 //Anzahl der Pixel die der Zeiger bewegt wird per timeout
circleTspeed=10 // Geschwindigkeit
circleStay=1

/***************************
Cross-browser object Abschnitt...
***************************/
function makeObj(obj,nest,x,y){nest=(!nest) ? "":'document.'+nest+'.'
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.evnt=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?this.css:0;
this.showIt=b_showIt; this.moveIt=b_moveIt; this.slide=b_slide; this.slideIt=b_slideIt;
this.obj = obj + "Object";         eval(this.obj + "=this"); return this}
function b_showIt(){this.css.visibility="visible"}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y}
function b_slideIt(endx,endy,inc,speed,fn,wh) {
if (!this.slideactive) {var distx = endx - this.x;var disty = endy - this.y
var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc
var dx = distx/num;var dy = disty/num; this.slideactive = 1; this.slide(dx,dy,endx,endy,speed,fn,wh)}}
function b_slide(dx,dy,endx,endy,speed,fn,wh) { if (!fn) fn = null; if(!wh) wh=null
if (this.slideactive && (Math.floor(Math.abs(dx))<Math.floor(Math.abs(endx-this.x)) ||  Math.floor(Math.abs(dy))<Math.floor(Math.abs(endy-this.y)))) { this.moveIt(this.x+dx,this.y+dy); eval(wh)
slidTim=setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{this.slideactive = 0;this.moveIt(endx,endy);eval(fn)}}

/*****************************************************************************************
Die init Function. Hier kann man einstellen, wo der Zeiger für jeden Button anhält (in PX)
******************************************************************************************/
function slideball_init(){
        But=new Array()
        for(i=0;i<=numItems;i++){ But[i]=new makeObj('divButton'+i) }
        Zeiger=new makeObj('divZeiger')
        But[0].moveIt(59,YYY)
        But[1].moveIt(122,YYY)
        But[2].moveIt(187,YYY)
        But[3].moveIt(250,YYY)
        But[4].moveIt(315,YYY)
        But[5].moveIt(379,YYY)
        But[6].moveIt(442,YYY)
        But[7].moveIt(506,YYY)
        But[8].moveIt(572,YYY)
        But[9].moveIt(636,YYY)
        But[10].moveIt(698,YYY)
        Zeiger.moveIt(circleXstart,YYY)
        for(i=0;i<=numItems;i++){ But[i].showIt() }
}

var slidTim=100;
var active=-1
function sbmover(num){
        clearTimeout(slidTim)
        Zeiger.slideactive=false
        Zeiger.slideIt(But[num].x,But[num].y,circlePXspeed,circleTspeed)
}
function sbmout(num){
        clearTimeout(slidTim)
        Zeiger.slideactive=false
        if(active>-1 && circleStay)Zeiger.slideIt(But[active].x,But[active].y,circlePXspeed,circleTspeed)
        else Zeiger.slideIt(circleXstart,YYY,circlePXspeed,circleTspeed)
}
function changeListing(num){ active=num }

if(bw.bw) onload=slideball_init;
-->
</script>

[zwischen <BODY> und </BODY>]
<div class="clButtons">
<table width="774" border="0" bgcolor="#5A5D5A"><tr>
<td width="30"></td>
<td align="center" width="60" id="divButton0"><a href="#" onmouseover="sbmover(0)" onmouseout="sbmout(0)">Link a</a></td>
<td align="center" width="60" id="divButton1"><a href="#" onmouseover="sbmover(1)" onmouseout="sbmout(1)">Link b</a></td>
<td align="center" width="60" id="divButton2"><a href="#" onmouseover="sbmover(2)" onmouseout="sbmout(2)">Link c</a></td>
<td align="center" width="60" id="divButton3"><a href="#" onmouseover="sbmover(3)" onmouseout="sbmout(3)">Link d</a></td>
<td align="center" width="60" id="divButton4"><a href="#" onmouseover="sbmover(4)" onmouseout="sbmout(4)">Link e</a></td>
<td align="center" width="60" id="divButton5"><a href="#" onmouseover="sbmover(5)" onmouseout="sbmout(5)">Link f</a></td>
<td align="center" width="60" id="divButton6"><a href="#" onmouseover="sbmover(6)" onmouseout="sbmout(6)">Link g</a></td>
<td align="center" width="60" id="divButton7"><a href="#" onmouseover="sbmover(7)" onmouseout="sbmout(7)">Link h</a></td>
<td align="center" width="60" id="divButton8"><a href="#" onmouseover="sbmover(8)" onmouseout="sbmout(8)">Link i</a></td>
<td align="center" width="60" id="divButton9"><a href="#" onmouseover="sbmover(9)" onmouseout="sbmout(9)">Link j</a></td>
<td align="center" width="60" id="divButton10"><a href="#" onmouseover="sbmover(10)" onmouseout="sbmout(10)">Link k</a></td>
<td width="30"></td>
</tr></table>
</div>
<div class="clZeiger">
<table bgcolor="#CECFCE" height="16" width="774" border="0" ><tr><td>
<div id="divZeiger"><img src="down.gif" width="16" height="16" border="0" alt="">
</div></td></tr></table></div>

[Autor]

Micha Doe

[Download]

Kopieren Sie bitte den Code

Copyright © 1998- Nightfire Webworker Archiv Script No: 431