JavaScript / preload images und onmouseover

Indium1 · 15.10.2012

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:

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=&quot]
[/FONT]

cebito · 15.10.2012

AW: JavaScript / preload images und onmouseover

Warum so umständlich? Ich glaub nicht, das deine Noten riesiege Dateien sind. Warum sie also nicht in einer Datei vereinen und die komplette Anzeige nur mit CSS lösen (Stichwort CSS-Sprites)
Vorteil: nur ein Request und ohne JS.

Indium1 · 16.10.2012

AW: JavaScript / preload images und onmouseover

Hallo Cebito,

erst einmal vielen Dank für Deine Antwort!

Zu Deiner Frage: Warum so umständlich?

Wie bereits in meiner Erklärung aufgeführt, sollen beim überfahren eines Rekursiven-Link (ein Link der auf sich selbst verweist) direkt vier Noten in vier unterschiedlichen IDs getauscht werden. Hiermit sind die IDs der einzelnen Listen (li) gemeint.

Soweit ich darüber informiert bin, funktioniert dies nur mit JavaScript, da ich per CSS nur die Kinder eines Elements ansprechen kann. Ich lasse mich aber gerne eines Besseren belehren!

Zum Thema CSS-Sprites bin ich geteilter Meinung. Vorteile wie Du schon angedeutet hast sind ein Request und ohne JS und das finde ich schon mal sehr gut. Nachteile können sich aber bei älteren Browsern zeigen, weil evtl. das CSS background-position ignoriert wird (Beispiel: Netscape 4). Solange solche Browser noch genutzt werden (für evtl. Screenreader oder für Mund- und Augen-Steuerungssysteme oder was auch immer) möchte ich einen möglichen angezeigten Icon-Salat weitestgehend verhindern.

Viele Grüße

Indium1

cebito · 16.10.2012

AW: JavaScript / preload images und onmouseover

Indium1 schrieb:
Wie bereits in meiner Erklärung aufgeführt, sollen beim überfahren eines Rekursiven-Link (ein Link der auf sich selbst verweist) direkt vier Noten in vier unterschiedlichen IDs getauscht werden. Hiermit sind die IDs der einzelnen Listen (li) gemeint.

Das lässt sich deinem obigen Beispiel aber nicht entnehmen, dort wird nur ein Bild getauscht, und zwar das des gehoverten Links.

Indium1 schrieb:
Zum Thema CSS-Sprites bin ich geteilter Meinung. Vorteile wie Du schon angedeutet hast sind ein Request und ohne JS und das finde ich schon mal sehr gut. Nachteile können sich aber bei älteren Browsern zeigen, weil evtl. das CSS background-position ignoriert wird (Beispiel: Netscape 4). Solange solche Browser noch genutzt werden (für evtl. Screenreader oder für Mund- und Augen-Steuerungssysteme oder was auch immer) möchte ich einen möglichen angezeigten Icon-Salat weitestgehend verhindern.

Netscape meinste jetzt aber nicht im Ernst, oder?

Indium1 · 16.10.2012

AW: JavaScript / preload images und onmouseover

Hallo Cebito,

Das lässt sich deinem obigen Beispiel aber nicht entnehmen, dort wird nur ein Bild getauscht, und zwar das des gehoverten Links.

Im obigen Code-Beispiel konntest Du es nicht entnehmen, dass ist richtig. Im Vorhaben wurde es aber aufgeführt!

Netscape meinste jetzt aber nicht im Ernst, oder?

Doch, dass meine ich ernst!

Es ist nämlich vollkommen irrelevant wie viele noch diese alten Browser nutzen. Relevant wird es beim warum, weshalb und wieso solche Browser noch eingesetzt werden. Es gibt etliche User die auf alte Technik angewiesen sind, weil z. B. vorhandene Programme für unterschiedliche Behinderungen nicht auf neue Systeme laufen würden oder umgekehrt. Neue Software bzw. Technik kosten mal locker ein paar tausend Euro (abhängig von der Behinderung). Kosten an denen sich die Krankenkassen evtl. alle paar Jahre mal dran beteiligen. Von daher kann man von solchen Usern nicht verlangen, dass die ihre Systeme aus eigener Tasche für immense Kosten regelmäßig Updaten, nur damit sie in den Genuss kommen eine Internetseite vernünftig zu betrachten. Man kann zwar einiges mit Conditional Comments oder CSS-Hacks ausbügeln, manche Sachen lassen sich aber nur durch ergänzende Skriptsprachen lösen.

Ich möchte nicht Unhöflich wirken, aber kannst Du mir jetzt bezüglich JS helfen oder nicht?

Viele Grüße

Indium1

Indium1 · 17.10.2012

AW: JavaScript / preload images und onmouseover

Hallo Cebito,

ich habe gerade einen umfangreichen Test gestartet mit CSS-Sprites. Obwohl das ja eigentlich eine gute Sache ist, musste ich leider wie schon vermutet feststellen, dass diese Anwendung nicht für elastische bzw. für flüssige Layouts gedacht ist. Für starre Layouts kann man es nutzen. Das bedeutet, es gibt keine Probleme mit der Anzeige der Icons neben den Links wenn man die Schriftgröße per CSS in Pixel festsetzt. Dies bedeutet aber auch, dass die User keine Möglichkeit mehr haben die Standardschriftgröße "im Browser" anzupassen (z. B. von 16px auf 72px). Das ist nicht im Sinne der geforderten Usability von W3C!

Probleme entstehen also bei elastischen bzw. bei flüssigen Layouts und zwar beim Vergrößern des Schriftgrades. Untereinander angereihte Icons in einem Bild verfasst, würden somit mit angezeigt was logischerweise nicht erwünscht ist.

Beispiel:

1. Zwei Bilder mit jeweils einer Höhe von 26px werden untereinander zusammengefasst. Man erhält jetzt eine Bildhöhe von insgesamt 52px;

2. In CSS wird das Bild als Hintergrundbild deklariert und die Startposition beläuft sich auf 0px:

Code:

background-image: url(../images/test.gif);
background-position: 0px 0px;
background-repeat: no-repeat;

3. Das <li> Tag bekommt im CSS eine height von 1.625em = 26px verpasst damit es sich der jeweiligen Schriftgröße anpassen kann;

4. Die Basisschriftgröße (font-size) wird für a-Tags im CSS auf 100.01% eingestellt;

5. Die Standardschriftgröße im Browser ist auf 16px eingestellt;

Fazit: Beim erhöhen der Browserschriftgröße auf 17px ist noch kein Unterschied festzustellen. Das Icon wird als einzelnes Objekt dargestellt. Erhöht man die Browserschriftgröße auf 18px, dann kommt das darunterliegende Icon mit ungefähr 1px hervor. Umso Höher man die Browserschriftgröße setzt umso mehr sieht man das darunterliegende Icon. Bei einer Schriftgröße von 72px kann es also passieren, dass gleich vier unterschiedliche Icons untereinander angezeigt werden.

Man kann zwar Bereiche per background-size eingrenzen, vorausgesetzt die Browser können CSS3. Selbst nicht mal der Internet Explorer in der Version 8 kann dies. Quelle:

http://msdn.microsoft.com/de-de/library/cc351024(v=vs.85).aspx

Eine weitere Möglichkeit wäre evtl. das zusammengefasste Bild mit allen Icons nicht als Hintergrundbild per CSS einzufügen sondern direkt in die HTML. Inwieweit man dann per CSS den Bereich eingrenzen kann entzieht sich meiner Kenntnis. Ehrlich gesagt interessiert mich das auch nicht, da bei ausgeschalteten CSS alle Icons angezeigt werden.

Von daher kommen CSS-Sprites für mich nicht in Frage!

Ich bitte also um Unterstützung wegen JavaScript, wie im Themenstart bereits aufgeführt.
Notfalls auch von anderen Mitgliedern dieses Forums.
Vielen Dank!!!

Viele Grüße

Indium1

Myhar · 17.10.2012

AW: JavaScript / preload images und onmouseover

Hallo Indium,

auch ich beschäftige mich mit Accessibility, Screenreadern, etc. Bei der Umsetzung von Websites im Bezug auf Accessibility wird man immer Abstriche machen müssen. Entweder, man macht eine lineare Website ohne Grafiken (nicht mit Bildern verwechseln), welche dafür dann super Accessible ist. Oder man macht eine Website, welche modern aussieht und zu einem gewissen Grad Accessible ist.
Ich nehme an, die WCAG sind dir ein Begriff?
Man muss dahin arbeiten, eine Seite so Zugänglich wie möglich zu erstellen. Eine Seite, die überall AAA erreicht, ist schwer zu machen. Aber man kann darauf achten, den Usern keine unnötigen Hindernisse zu liefern.
Beispiel deine Navigation (+ Sprites): Auch ich setze Sprites ein, aber folgendermaßen: Die WCAG sagen, dass eine Seite bis zu einem gewissen Prozentsatz (weiß ich leider nicht auswendig) skalierbar sein soll, damit sie als zugänglicch gilt. Was ich nun mache: Wenn ich die Seite im FF öffne, dann auf Ansicht -> Zoom -> Nur Text zoomen gehe und sechs mal Strg + drücke, dann muss die Seite noch lesbar und funktional sein. Mit der Einstellung werden keine Bilder vergrößert, das Problem mit deinen Sprites lässt sich also nachvollziehen.
Lösung dafür: Man lässt einen Abstand zwischen den Sprites, welcher groß genug ist, dass er selbst bei sechsfacher (oder welche Zahl du dir persönlich auch immer vor nimmst) noch ausreicht, dass keine zwei Bilder sichtbar sind.
Ein weiterer Ansatz sind diagonale Sprites. Die können gut für Icons eingesetzt werden, für Techniken wie Sliding-Door eignen sie sich jedoch überhaupt nicht.
Drittens gibt es noch die Lösung mittels Javascript, aber das ist die unzugänglichste Methode und, wie schon gesagt, überhaupt nicht zu empfehlen.
Ja ich weiß, du hast die Sache mit Netscape 4 erläutert und mir ist es klar. Aber was du dich fragen musst, wie viele dieser Benutzer mit diesem Szenario schlußendlich auf deine Seite kommen werden. Und wenn die keine sinnvolle Grafik sehen, so kannst du doch in deinem CSS zB die Hintergrundfarbe so setzen, dass sie trotzdem eine Unterscheidung der Menüpunkte haben.
Eine Website muss nicht auf jedem Monitor gleich aussehen.
Zusammengefasst nochmal von mir: Vergiss Javascript, um solche Anzeigelogiken zu implementieren. Es birgt nur Nachteile.

tr4ze · 17.10.2012

AW: JavaScript / preload images und onmouseover

Mal von Sinn oder Unsinn deines Vorhabens abgesehen, was du vor hast lässt sich mit dem DOM lösen.Wie du deine Bilder in ein DOM-Objekt lädst, darauf zugreifst, Konflikte vermeidest usw. ist in denn unten aufgeführten Links erklärt.

Organisation von JavaScripten

Objekt-Handling in JavaScript

Fader-Framework - kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts

Myhar · 17.10.2012

AW: JavaScript / preload images und onmouseover

Machbar ist vieles. Aber darf ich einen Satz aus dem ersten Absatz deines verlinkten Artikels zitieren:

CSS ist dafür da, die Regeln für Darstellung dieser Inhalte vorzugeben, sei es auf einem Desktop-Bildschirm, auf einem Handheld, auf Papier oder anders.

Da es dem Threadersteller um die Darstellung geht, müsste er laut deinen Links CSS anwenden.
Auch sind die von dir verlinkten Inhalte nur bedingt nützlich, da sein Problem bei Eventhandlern zu suchen ist. Solch einen Beitrag hast du nicht verlinkt. Das kann man zwar leicht selber finden, aber zielführend ist es (so wie deine restlichen Links) wohl nicht wirklich.
Ich hoffe nur, der TE erkennt, dass er mit JS mehr Barrieren erzeugt, als er beseitigt und deshalb af eine CSS Lösung zurückgreift.

Indium1 · 19.10.2012

AW: JavaScript / preload images und onmouseover

Hallo Myhar,
hallo tr4ze,

vielen Dank für die reichhaltigen Informationen!

Zu Myhar:

Vorweg sind mir die Web Content Accessibility Guidelines ein Begriff. Ich kann sie zwar nicht aus dem FF aber zusätzliche Unterstützung erhalte ich durch ein Buch von Jan Eric Hellbusch und Kerstin Probiesch aus dem Jahre 2011, wo sehr vieles über Barrierefreiheit im Web erklärt, sowie auch über Barrieren aufgezeigt wird.

Zum Thema, dass eine Website nicht auf jedem Monitor gleich aussehen muss, da stimme ich Dir absolut zu. Bei flüssigen Layouts wäre das sowieso nicht mehr der Fall, da sich ja das Layout an die Browsergröße anpassen, sowie die Ausgangsschriftgröße nutzerbasiert skaliert werden soll. Nach WCAG-Richtlinien sollen vor allem Texte und Formularinhalte auf 200% der Ausgangsschriftgröße skaliert werden können.

Im Großen und Ganzen verstehe ich Deine Nichtempfehlung hinsichtlich was JavaScript angeht. Es ist noch nicht kompatibel mit den Screenreadern und wird es vielleicht auch nie sein. Von daher sollte JavaScript auch nur als Ergänzungstechnik eingesetzt werden. Dies hätte ich in meinen speziellen Fall auch nur getan, weil die Grafiken (Noten) neben den Linktexten keine Anzeigelogiken sondern reine Eyecatcher sind. Sie dienen nur für das Design und stellen demnach keine wichtigen Informationen dar. Da die Hauptgrafiken per CSS als Hintergrundbilder geladen werden, sind sie auch bei deaktivierten JavaScript sichtbar. Mouseovereffekte die die Linktexte betreffen, werden auch nur durch CSS gestaltet. Die Website würde somit zugänglich und navigierbar bleiben.

Warum ich auf JavaScript gekommen bin, habe ich ja schon in der Themenerstellung in etwa erläutert. Ein weiterer Punkt wäre aber noch, dass ich den Netscape 4 gerne die Notengrafiken im a-Tag mitgegeben hätte. Die Höhe der Grafiken (26px) wurde aber durch den a-Tag wegen der Standardschriftgröße ignoriert. Circa 1/3 der Grafik wurde somit nicht angezeigt. Ich hätte demnach entweder line-height: oder display: block in Verbindung mit height anwenden müssen. line-height: und display: block sind für den Netscape aber verlorene Liebesmüh. Somit habe ich die Hintergrundgrafiken in die li-Tags gepackt und wollte mittels JS darauf zugreifen.

In den nächsten Tagen werde ich mal folgendes Versuchen (ist nur eine Idee also nicht gleich meckern);

In der Basis CSS für ältere Browser gebe ich für die jeweiligen li-Tag IDs eine Hintergrundgrafik an:

HTML:

<link rel="stylesheet" media="screen,projection" type="text/css" href="styles/style-basis.css" />

Code:

li#blablabla {
background-image: url(../images/note.gif);
background-repeat: no-repeat;
}
…

In der CSS für moderne Browser schalte ich die Grafiken in den li-Tags wieder aus, richte dafür aber die a-Tags mit Hintergrundgrafiken (Sprites) ein:

HTML:

<style media="screen,projection" type="text/css">@import url(styles/style-modern.css) all;</style>

Code:

li#blablabla {
background-image: none;
}
…

Das wird zwar auch noch viel Schreiberei bezüglich der Positionsangaben mit den a-Tags aber falls es funktioniert dann hätte man sich JS wirklich gespart und man kann auf CSS-Sprites ausweichen. Das dann die Hintergrundgrafiken im NS4 nicht ausgewechselt werden ist nicht so schlimm. Ich habe aber jetzt schon im Gefühl das der NS4 das mal wieder nicht mitmacht. Naja, mal schauen! :uhm:

So, jetzt muss ich los. Wünsche euch beiden schon mal einen guten Start ins Wochenende!

Viele Grüße

Indium1