Eintrag markieren

Um einen Eintrag im Menü mit einer Hintergrundfarbe hervorzuheben, wenn das entsprechende Dokument in den seiteFrame geladen wird, weise ich jedem Menüeintrag eine ID zu, über die er von außen ansprechbar ist.

Um den Quelltext des Menügenerators nicht weiter aufzublähen oder die strukturbildende Funktion durch ein zusätzliches Argument weiter zu belasten, übernehme ich als ID einfach den url (siehe function LE() bzw. function VE()). Daher muss ID in diesen Funktionen nicht als eigenes Objekt definiert werden.

Anmerkung

Dieses Dokument ist noch nicht an die online verfügbare Umgebung mit dem JS-Menü gekoppelt und befindet sich noch in Bearbeitung. Einige Quelltext-Teile wurden deaktiviert bzw. neu eingefügt, wodurch sich das Dokument weitgehend fehlerfrei bedienen lassen dürfte. Der Ausbau einer Beispiel-Sammlung und der zugehörigen Dokumentation ist in Arbeit.

Ich verwende hier für die Anzeige die aus verschiedenen Quelltext-Editoren bekannte Farbsyntax, um HTML-Tags, ihre Attribute und die dazugehörigen Werte übersichtlich darzustellen.

JavaScript-Anweisungen zeige ich in schwarzer Fettschrift, Attribute blau, Werte grün. Definierte Funktionen und Variablen erscheinen in blau, Variablen zusätzlich in Fettschrift, Kommentare wie üblich dezent grünlich und kursiv. Code-Fragmente innerhalb der Fließtexte werden hellgrau hinterlegt. Von mir vorgenommene Änderungen an den Originaltexten sind fett rot markiert, bei einzelnen Zeichen ist dies zwar nicht leicht zu erkennen, aber zum Vergleich kann man einen Blick auf den zugehörigen Originaltext werfen.

ID-Zuweisung für Ordner- und Link-Einträge

function maleVerz(sE,zE){ // Original JS Menü 1.3
[...] // Linkeintrag // die erste Zeile dient nur der Orientierung
lstat=(nach[idx].lstat=="")?w1:nach[idx].lstat
m.write("<A HREF=\""+nach[idx].url+"\" TARGET=\""+((nach[idx].ziel=="")?ZielFrame:nach[idx].ziel))
[...] // Ordnereintrag
m.write(jsp+"ufzu('"+nach[idx].name+"',"+w1+")"+oMO+((w1==1)?vza:vzz)+rt+BU+w2+LHg+WH9+vza+"\">"+BU)
}

Folgende Änderungen sind vorzunehmen

function maleVerz(sE,zE){ // skycle.de (hier ohne abgewandelte Zeichenmaskierung)
[...] // Linkeintrag
m.write("<a href=\""+nach[idx].url+"\" id=\""+nach[idx].url+"\" target=\""+((nach[idx].ziel=="")?ZielFrame:nach[idx].ziel))
[...] // Ordnereintrag (die umgestellten maskierten Anführungszeichen ergeben sich aus der Standard-Variablendeklaration, z.B. oMO)
m.write(jsp+"ufzu('"+nach[idx].name+"',"+w1+")"\" id=\""+nach[idx].url+"+oMO+((w1==1)?vza:vzz)+rt+BU+w2+LHg+WH9+vza+"\">"+BU)
}

Die Vorarbeit ist nun geleistet. Jetzt kann eine globale Funktion erzeugt werden, die als Parameter das Verweisziel des aktuell im seiteFrame geladenen Dokuments erwartet, so wie es im Menü aufgerufen wird.

Wird ein Dokument beispielsweise im Menü als "seite.htm" oder "/kapitel/seite10/text.htm#absatz3" aufgerufen, so erhält der Link im Menü diese Angabe als hypertext reference (href) und als ID (denn ein und dasselbe Dokument ist ja sicher im Menü nur einmal verlinkt - außer wenn man zweizeilige Einträge verwendet. Man beachte: eine ID ist eindeutig, jede ID darf nur einmal vorkommen). Man muss der Funktion also beispielsweise "seite.htm" oder "/kapitel/seite10/text.htm#absatz3" als Parameter übergeben.

Nach der Übergabe soll sie dem Eintrag mit der entsprechenden ID eine Hintergrundfarbe zuweisen. Bei Aufruf des Dokuments färbt sich (bei mir) der Eintrag gelb, und beim Verlassen wird der Link wieder entfärbt. Also muss noch eine Variable mitgegeben werden, welche besagt: Licht an oder Licht aus ( null bzw. 1).

Ich taufe die Funktion menuElmt() und übergebe den URI des Eintrags als lID (link-ID) und den Zustand als active.

Im folgenden Abschnitt definiere ich die Funktion.

Die Funktion wendet sich an dHTML-fähige Browser und ist nicht Netscape v4.x konform. Die Funktion soll global verfügbar sein, das heißt, man schreibe sie in eine .js-Datei, die in jedes Dokument eingebunden wird, oder man definiert sie in jeder betreffenden Datei neu.
Die Farbwerte kannst Du natürlich nach Belieben anpassen.

Der Aufruf gestaltet sich folgendermaßen: man erweitere in jeder Datei, die durch das Menü in den seiteFrame geladen wird, das body-Tag.

Datei seite.htm:
<body onLoad="menuElmt('seite.htm',1)" onUnload="menuElmt('seite.htm',0)">

Die Null kann auch weggelassen werden:

Zusatzinformation

(1) Die Funktion könnte noch insofern abgewandelt werden, dass sie beim Hervorheben eines Eintrags eine vorherige Hervorhebung selbsttätig ausschaltet, möglicherweise mit document.onUnload= (noch nicht getestet)
(2) Menüordner, die nicht selbst verlinkt sind, haben auf Grund des fehlenden href=-Attributes auch keine ID und können somit nicht von der Funktion erfasst werden.
(3) Die zweite if()-Abfrage direkt nach Funktionsstart könnte weggelassen werden, da das JS-Menü das Element mit der entsprechenden ID „sowieso“ erzeugt.
(4) Man kann die Funktion durch das Menü selbst aufrufen lassen. Man müsste die (js)index.htm so anpassen, dass der Zielquelltext folgendermaßen aussieht:

Dies ergibt allerdings folgende Problematiken:
(4.1) Ein <body onUnload="menuElmt('seite.htm')"> müsste man trotzdem einbauen, wenn man innerhalb eines geöffneten Ordners zwischen den Dokumenten hin- und herspringt.
(4.2) Einträge mit ungültigen URIs werden nicht entfärbt, solange der den Link enthaltende Ordner offen bleibt - es gibt kein Dokument, also auch kein onUnload im body-Tag.
(4.3) Ordner werden beim Klicken kurz gefärbt, aber durch den Öffnungsmechanismus sofort wieder entfärbt. Ein setTimeout() brächte keinen Erfolg.
(4.4) Das Skript mit der Funktion muss auch in der (js)index.htm eingebunden sein.

JavaScript - Dokumentation JS Menü

Eintrag markieren

Anmerkung

ID-Zuweisung für Ordner- und Link-Einträge

Folgende Änderungen sind vorzunehmen

Zusatzinformation