Artikel-Hilfsmenü
Samstag, 11. Dezember 2004 – aktualisiert am Samstag, 18. Januar 2020
JavaScript
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Hinweis: Diese Seite ist am 18.01.2020 unverändert aus der Rubrik Tips'n Tricks hierher umgezogen. Der Inhalt ist zwar nicht mehr aktuell, aber ich konnte mich einfach nicht von diesem Produkt aus der Anfangszeit meiner Beschäftigung mit Webdesign trennen.
JavaScript ist etwas in Verruf geraten. Durch Webseitenbastler, die damit allerlei sinnlosen Unfug anstellen. Harmlosen Unfug zwar in der Regel, aber immerhin nervend. Daher schalten auch immer mehr Web User JavaScript in ihrem Browser ab.
Dabei gibt es durchaus sinnvolle Anwendungen für JavaScript. Wichtig ist nur, eine sogenannte fallback - Variante vorzusehen, die bei abgeschaltetem JavaScript dafür sorgt, dass die Inhalte weiterhin verfügbar sind.
- Thumbnails mit Popups
- Bildwechsel mit onclick oder onmouseover
- Diashow
- Image Preloader - Bilder vorladen
- Ein Textmarker für Google & Co.
- Ein Script, um Bereiche einer Webseite auf Klick ein- und auszublenden
- Der Artikel: Wie setzt man JavaScript richtig ein?
Beispiele
Vorschaubilder (sogenannte thumbnails), die bei Mausklick ein popup, ein neues Fenster, mit dem Bild in voller Größe öffnen
Die Größe des Popups und der Titel werden durch entsprechende Parameter vom html übergeben. Das Popup wird zentriert angezeigt.
Fallback: bei abgeschaltetem JavaScript wird das Bild im gleichen Fenster angezeigt.
Und noch ein feature:
Mehrere Popups auf der gleichen Seite:
Das zuerst geöffnete Popup wird beim Aufruf eines zweiten Popups geschlossen, damit Letzteres in der richtigen Größe angezeigt wird. Die meisten Scripts machen das falsch.
Statistik:
- Letzte Änderung: 25.12.07
- Dateigröße: 1.5 kB
Wie die Funktion aufgerufen wird, um das Fallback sicherzustellen, können Sie sich im source dieser Seite anschauen.
Bildwechsel mit onmouseover
Fahr mal mit der Maus in die Büsche!
Was aussieht wie ein Flash Film, ist in Wirklichkeit ein Bildwechsel, der per JavaScript mit onmouseover bzw. onclick ausgelöst wird.
Dabei wird ein statisches Bild durch ein animated gif ersetzt
Natürlich wieder mit fallback bei deaktiviertem JavaScript, auch wenn der Effekt dabei natürlich bei weitem nicht mehr so verblüffend ist. Wenn JavaScript deaktiviert ist, wird das animated gif einfach in einem neuen Fenster angezeigt. Wichtig bei Verwendung von JavaScript ist, dass der Inhalt auch bei deaktiviertem JavaScript zugänglich bleibt. (gut, dies ist vielleicht nicht das beste Beispiel, um die Notwendigkeit eines fallbacks zu zeigen; aber das Beispiel zeigt wie es funktioniert.)
Der Code dazu:
<a href = "images/giraffe_anim.gif" onmouseover="this.firstChild.src=this.href;" onkeypress=""><img src="images/giraffe.jpg" alt="" width="140" height="113" /></a>
Bildwechsel mit onclick
Der gleiche Effekt läßt sich auch mit onclick realisieren.
Der Code hierfür:
<a href = "images/giraffe_anim.gif" onclick="this.firstChild.src=this.href; return false;" onkeypress=""><img src="images/giraffe.jpg" alt="" title="klick mich ..." width="140" height="113" /></a>
Und jetzt beides kombiniert. Damit kann ich den Film auf beide Arten starten:
<a href = "images/giraffe_anim.gif" onclick="this.firstChild.src=this.href; return false;" onmouseover="onclick();" onkeypress=""><img src="images/giraffe.jpg" alt="" title="klick mich ..." width="140" height="113" /></a>
Diashow mit JavaScript
Für dieses Script gibt es kein fallback! Daher zeige ich die Schaltflächen "zurück" und "nächstes Bild" nur an, wenn JavaScript unterstützt wird. Benutzer ohne JavaScript sehen dann einfach nur ein Bild, und ahnen nicht, dass da noch mehr dahintersteckt.
Image Preloader - Bilder vorladen
Die beschriebenen JavaScript Effekte Bildwechsel und Diashow funktioneren nur dann richtig, nämlich ohne Verzögerung, wenn die Bilder nicht erst bei Bedarf vom Server geladen werden müssen, sondern bereits im Browser Cache liegen.
Um dies zu erreichen, gibt es eine verblüffend einfache, und absolut sichere Möglichkeit - sogar ganz ohne JavaScript:
Die entsprechenden Bilder ganz normal in ein <img> Tag einbinden, und die Größe per width und height auf 1 × 1 Pixel setzen.
Dieses 1 Pixel große Bild ist fast nicht zu sehen. Und falls selbst dieser Punkt noch stören sollte, kann man ihn z.B. als Satzende-Zeichen verwenden.
Ein Textmarker für Google & Co.
Wer über eine Suchmaschine auf meinen Seiten landet, findet jedes Vorkommen des bei Google & Co. eingegebenen Suchbegriffs auf meiner Seite automatisch farblich unterlegt. Diese Aufgabe übernimmt ein kleines, aber feines JavaScript, das sich leicht in HTML-Seiten einbauen lässt.
Das Originalscript ist von externer Link: Stuart Langridge. Danke Stuart.
Und ich hab's mal ins Deutsche übersetzt und angepaßt.
Das angepaßte Script funktioniert natürlich auch mit der seiteneigenen Suche.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
1 Kommentar
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Christoph Jochum schrieb am Dienstag, 19.09.23 17:31 Uhr:
Hallo Fritz,
nach langer Zeit melde ich mich hier mal wieder - diesmal mit einer Frage zu Vorschaubilder (popup.js).
Nach dem Laden oder einem Reload der Seite muss man das zu vergrößernde Bild beim ersten Mal 2x klicken, damit das Popup erscheint. Danach genügt ein einfacher Klick. Gibt es eine Möglichkeit, das zu ändern?
Vielen Dank und herzliche Grüße von
Christoph