Nightfire Java Archiv - JavaScript - Tutorials

[]

Dieses Script demonstriert, wie man einen aktiven Link dynamisch generiert. Gleichzeitig wird die gepunktete Linie, die der IE und neurdings auch NS um Links zieht, entfernt.
Das Script eignet sich hervorragend für Frames und von extern geladene Dokumente.

Die Funktion active() macht die Hauptarbeit, sehen wir sie uns mal genauer an.

Das Script verwendet die Methode document.getElementsByTagName() des W3C DOM. Diese Methode verwendet den Tagtyp als ihr Argument und gibt alle Tags dieses speziellen Typs in einem HTML- Dokument zurück. Im Grunde ist es eine Sammelmethode, die die Werte in einem Array zurückgibt. In unserem Falle wollen wir dies lediglich auf die Links innerhalb des cont CSS Layer anwenden, so dass wir folgendermassen vorgehen:

obj = document.getElementById("cont"). getElementsByTagName("a");

for(i=0;i<obj.length;i++)

Die zweite Zeile erlaubt uns, durch Einsatz einer Schleife ein Array zu erzeugen, so dass die zutreffenden Links equivalent sind zu:

link no.1 = obj[0]
link no.2 = obj[1]
link no.3 = obj[2]
ect...

Die Anzahl aktiver Links ist nahzu unbeschränkt. Alles was wir nun noch zu tun haben, ist, jedem Link einen Eventhandler zuzuweisen:

In diesem Beispiel setzen wir den ersten aktiven Link so:

obj[0].style.color = "red";

Die Farbe können Sie Ihren Vorstellungen entsprechend anpassen.

Zuletzt entfernen wir die Punktelinie um die Links, indem wir folgenden Code in die Init() Function setzen:

obj[i].onfocus=new Function("if(this.blur)this.blur()");

Hier nun das komplette Script:

<html>
<head>
<title>ActiveLink</title>
<style type="text/css">
body {
margin:100px
}
#cont {
position:relative;
width:125px;
}
#cont a {
color:blue; text-decoration:none;
font-size:16px;
font-weight:bold;
}
#cont a:hover {
color:blue;
text-decoration:underline;
font-size:16px;
font-weight:bold;
}
</style>
<script language="JavaScript">
/**************************************************************
Script made by Martial Boissonneault http://getElementById.com/
This script is provided free to the web development community.
**************************************************************/
function Active(num) {
for(i=0;ibr> obj[i].style.color = "blue";
obj[num].style.color = "red";
}

function Init() {
if(document.getElementById){
obj = document.getElementById("cont").getElementsByTagName("a");
for(i=0;i<obj.length;i++)
obj[i].onfocus=new Function("if(this.blur)this.blur()");
obj[0].style.color = "red";
}
}

onload=Init;
</script>
</head>
<body>

</body>
</html>

zurück