Hallo an alle Leser,
bezüglich JavaScript bitte ich um eure Unterstützung da ich irgendwie nicht weiterkomme.
Folgendes Vorhaben:
Das Linkmenü im HTML ist wie ein Notenblatt strukturiert. Hierfür wird eine Aufzählungsliste (ul / li) genutzt die über CSS gestaltet wird. Neben jedem Link ist eine Note platziert die per CSS background-image eingefügt wurde. Das jeweilige Hintergrundbild soll bei Mouseover eines Links ausgetauscht werden. Beim überfahren eines Rekursiven-Link (ein Link der auf sich selbst verweist) sollen direkt vier Noten in vier unterschiedlichen IDs getauscht werden. Da dies mit reinen CSS bzw. CSS-Sprites leider nicht zu machen ist (glaube ich zumindest), habe ich mich für die JavaScript-Variante entschieden.
Für das vorladen der Grafiken habe ich zuerst mit HTML-Preloading geliebäugelt. Dabei wird am Anfang des HTML Codes ein DIV-Tag eingefügt, damit es vor dem eigentlichen Seiteninhalt geladen wird. Im DIV stehen dann alle IMG-Dateien die später benötigt werden. Das DIV wird per CSS display: none versteckt und für ältere Browser werden die Grafiken zusätzlich verkleinert sowie außerhalb des Browsers positioniert (falls ältere Browser dies akzeptieren). Leider gibt es noch einen zusätzlichen Haken: Sollte ein User z. B. aus Gründen der Barrierefreiheit (Screenreader etc. pp.) CSS ausgeschaltet haben, dann werden ihm alle Grafiken, die eigentlich versteckt sein sollten, dennoch angezeigt. Das sollte nicht geschehen und demnach habe ich mich auch für das Preloading mit JavaScript entschieden.
Momentan verfahre ich folgendermaßen:
1. Der JavaScript-Code ist wegen der XHTML 1.0 Strict Deklaration in eine eigene .js Datei ausgelagert worden:
2. Mit onload wird die Funktion für das Preloading angesprochen:
3. Der Preloading-Code in der .js Datei sieht bei mir momentan so aus:
Die Bilder werden zumindest schon mal in den Browsercache geladen und haben den Originalnamen behalten.
Die Frage ist jetzt, wie greife ich darauf zu?
Zurzeit wende ich folgende Methode an;
4. Für Mouseover nutze ich nachstehenden HTML-Code:
5. Für das wechseln der Hintergrundgrafik ist somit die gleiche .js Datei zuständig die auch das Preloading erledigt. Dies geschieht momentan folgendermaßen:
Wie bereits schon angedeutet, wie greife ich auf die bereits vorhandenen Grafiken im Browsercache zu? Momentan löse ich mit function startseiteover und function begruessungover jeweils einen weiteren Request auf dem ursprünglichen Bilderordner auf dem Server ab.
Im Vorfeld bedanke ich mich schon mal für alle Antworten und verbleibe
mit freundlichen Grüßen
Indium1
[FONT="]
[/FONT]
bezüglich JavaScript bitte ich um eure Unterstützung da ich irgendwie nicht weiterkomme.
Folgendes Vorhaben:
Das Linkmenü im HTML ist wie ein Notenblatt strukturiert. Hierfür wird eine Aufzählungsliste (ul / li) genutzt die über CSS gestaltet wird. Neben jedem Link ist eine Note platziert die per CSS background-image eingefügt wurde. Das jeweilige Hintergrundbild soll bei Mouseover eines Links ausgetauscht werden. Beim überfahren eines Rekursiven-Link (ein Link der auf sich selbst verweist) sollen direkt vier Noten in vier unterschiedlichen IDs getauscht werden. Da dies mit reinen CSS bzw. CSS-Sprites leider nicht zu machen ist (glaube ich zumindest), habe ich mich für die JavaScript-Variante entschieden.
Für das vorladen der Grafiken habe ich zuerst mit HTML-Preloading geliebäugelt. Dabei wird am Anfang des HTML Codes ein DIV-Tag eingefügt, damit es vor dem eigentlichen Seiteninhalt geladen wird. Im DIV stehen dann alle IMG-Dateien die später benötigt werden. Das DIV wird per CSS display: none versteckt und für ältere Browser werden die Grafiken zusätzlich verkleinert sowie außerhalb des Browsers positioniert (falls ältere Browser dies akzeptieren). Leider gibt es noch einen zusätzlichen Haken: Sollte ein User z. B. aus Gründen der Barrierefreiheit (Screenreader etc. pp.) CSS ausgeschaltet haben, dann werden ihm alle Grafiken, die eigentlich versteckt sein sollten, dennoch angezeigt. Das sollte nicht geschehen und demnach habe ich mich auch für das Preloading mit JavaScript entschieden.
Momentan verfahre ich folgendermaßen:
1. Der JavaScript-Code ist wegen der XHTML 1.0 Strict Deklaration in eine eigene .js Datei ausgelagert worden:
HTML:
<script type="text/javascript" src="navigation.js"></script>
2. Mit onload wird die Funktion für das Preloading angesprochen:
HTML:
<body onload="grafikload()">
3. Der Preloading-Code in der .js Datei sieht bei mir momentan so aus:
Code:
[FONT=Arial]
[/FONT][FONT=Arial]// Bilder Array:
[/FONT][FONT=Arial]var BildListe = new Array();
[/FONT][FONT=Arial]BildListe[0] = "images/pink-right-ani.gif";
[/FONT][FONT=Arial]BildListe[1] = "images/pink-left-ani.gif";
[/FONT][FONT=Arial]// Function zum vorladen der Bilder:
[/FONT][FONT=Arial]var Bilder = new Array();
[/FONT][FONT=Arial]function grafikload() {
[/FONT][FONT=Arial] for (i = 0; i < BildListe.length; i++) {
[/FONT][FONT=Arial] Bilder[i] = new Image();
[/FONT][FONT=Arial] Bilder[i].src = BildListe[i];
[/FONT][FONT=Arial]}
[/FONT][FONT=Arial]}
[/FONT]
Die Bilder werden zumindest schon mal in den Browsercache geladen und haben den Originalnamen behalten.
Die Frage ist jetzt, wie greife ich darauf zu?
Zurzeit wende ich folgende Methode an;
4. Für Mouseover nutze ich nachstehenden HTML-Code:
HTML:
<ul id="main-navigation">
<li id="startseite" class="bordertopright"><a class="pink" onmouseover="startseiteover();" onmouseout="startseiteout();" href="#">Startseite</a></li>
<li id="bandcrew" class="bordertopright"><a class="pink" onmouseover="bandcrewover();" onmouseout="bandcrewout();" href="#">Bandcrew</a></li>
</ul>
5. Für das wechseln der Hintergrundgrafik ist somit die gleiche .js Datei zuständig die auch das Preloading erledigt. Dies geschieht momentan folgendermaßen:
Code:
[FONT=Arial]
[/FONT][FONT=Arial]function startseiteover() {
[/FONT][FONT=Arial]document.getElementById('startseite').style.background = "url(images/pink-right-ani.gif) no-repeat";
[/FONT][FONT=Arial]}
[/FONT][FONT=Arial]function begruessungover() {
[/FONT][FONT=Arial]document.getElementById('begruessung').style.background = "url(images-pc/pink-left-ani.gif) no-repeat";
[/FONT][FONT=Arial]}
[/FONT]
Wie bereits schon angedeutet, wie greife ich auf die bereits vorhandenen Grafiken im Browsercache zu? Momentan löse ich mit function startseiteover und function begruessungover jeweils einen weiteren Request auf dem ursprünglichen Bilderordner auf dem Server ab.
Im Vorfeld bedanke ich mich schon mal für alle Antworten und verbleibe
mit freundlichen Grüßen
Indium1
[FONT="]
[/FONT]