Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

JavaScript

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, daß die Inhalte weiterhin verfügbar sind.

Beispiele

Vorschaubilder (sogenannte thumbnails), die bei Mausklick ein popup, ein neues Fenster, mit dem Bild in voller Größe öffnen

Blasmusik: die riesigen, messigglänzenden Trichter von zwei Basstuben Karikatur eines Mannes, der halb verdurstet kriecht, und dabei einen Krug voll Bier hoch hält

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.


Script downloaden

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.

Die Größe von Bildern an die Größe des Browserfensters anpassen

Browser sind keine Grafikprogramme, und daher die denkbar schlechtesten Werkzeuge zur Größenanpassung von Bildern.


Aber es gibt Fälle, in denen es Sinn macht, den Browser über die angezeigte Größe von Bildern entscheiden zu lassen:
Diese Seite ist ein Beispiel dafür.


Verkleinern Sie mal das Browserfenster immer weiter, und beobachten Sie die obigen Bilder: unter circa 800 Pixel Fensterbreite wird das Bild proportional verkleinert, damit das Seitenlayout nicht zerfällt. Daß die Qualität darunter leidet, kann in diesem Fall in Kauf genommen werden.
(diese Funktionalität ist nur in den Styles Standard und invertiert implementiert.)


Realisiert wird das folgendermaßen:

die Klasse "bild" wird mit CSS formatiert:

.bild {
  width : 200px;
  max-width : 50%;
}

Bildwechsel mit onmouseover

eine Giraffe hält Ausschau

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, daß 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>

Ein schönes Beispiel für einen sinnvollen Bildwechsel mit onmouseover auf dieser externer Link: Homepage einer Möbelschreinerei

Diashow mit JavaScript

Bildwechsel 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, daß 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.

wie der Textmarker auf meiner Seite Suchbegriffe farblich hervorhebt

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.