JavaScripts für Ihre Website

Grafik und Video

Mit Niceforms gestalten Sie die kantigen und wenig attraktiven Standard-Web-Formulare moderner und ansprechender. Am jeweiligen Formular selbst müssen Sie dazu nichts ändern. Verknüpfen Sie lediglich die mitgelieferte Skript- und die CSS-Datei im Seitenkopf und weisen Sie dem Tag <form> die Klasse niceform zu. Das Skript tauscht die Formularfelder durch eigene Grafikelemente aus.

Javascripts zum Soforteinbau

© Archiv

Niceforms: Verpassen Sie den kantigen und spröden Standard-Formularen einen neuen, eleganten Look.

Um beispielweise Online-Bestellungen korrekt ausführen zu können, benötigt der Shopbetreiber Kundendaten wie Name, Postleitzahl, Wohnort, Straße und Hausnummer. Auch wenn diese Angaben per Formular abgefragt werden, ist nicht sichergestellt, dass die Kunden alle Felder ausfüllen.

Das Skript Dynamic Javascript Form Validation prüft die Vollständigkeit aller Eingaben und weist den Besucher per Tooltip darauf hin, wenn Angaben fehlen. Die hierfür verantwortlichen Funktionen finden Sie in der Datei messages.js. Sie haben den folgenden Aufbau:

inlineMsg('name','You must enter your
name.',2);

Der erste Parameter enthält den Text, der im Tooltip steht, der zweite legt fest, nach wie vielen Sekunden der Hinweis eingeblendet wird.

Grafik und Video

Sie fügen mit JQZoom Evolution eine Lupenfunktion zu Ihren Bildern hinzu. Bewegen Sie die Maus über die jeweilige Grafik, so erscheint das gewählte Detail daneben stark vergrößert.

Eine ausführliche Installationsanleitung finden Sie auf der Homepage des Anbieters hier. Mit Parametern lassen sich Größe und Position der Bildobjekte anpassen. Das Skript Magic Zoom bietet noch weitergehende Möglichkeiten, um Lupenfunktionen einzusetzen.

Fancyzoom startet beim Klick auf ein Vorschaubild die vergrößerte Version der Grafik. Das Skript blendet diese jedoch nicht trocken ein, sondern es zieht sie mit einem Transparenzeffekt elegant auf. Mit einem Klick auf das Kreuz oben links fahren Sie die Grafik auf ihre Ausgangsgröße zurück.

Javascripts zum Soforteinbau

© Archiv

JQZoom Evolution: Zeigen Sie Details eines Bildes direkt daneben in starker Vergrößerung.

Kaum eine Layout-Technik hat sich in den letzten Monaten so rasant verbreitet wie der Lightbox-Effekt. Durch das Anklicken eines kleinen Vorschaubilds dunkeln Sie die Webseite ab, und die Großansicht des Fotos überlagert sie mit einem Transparenzeffekt.

Mittlerweile gibt es zahlreiche Skripts, die sich dafür ohne großen Aufwand einbauen lassen. Sie benötigen das jeweilige Bild sowohl in Thumbnail-, als auch in Originalgröße. Technisch setzen die Lösungen auf gängigen Frameworks wie den Mootools, Prototype oder jQuery auf.

Mit Multibox zeigen Sie aber nicht nur Bilder, sondern auch Flash-Animationen, Videos und HMTL-Elemente in der Lightbox an. Auf der Seite klein dargestellte Fotos, Filme und andere Inhalte lassen sich so elegant auf die volle Größe des Browserfensters aufziehen. Videos lassen sich über die üblichen Bedienelemente des Players steuern.

Eine Fotogalerie mit Lightbox-Effekt präsentieren Sie mit Lightbox 2. Unter How to Use auf der Seite des Anbieters finden Sie eine Schritt-für-Schritt-Anleitung zur Einrichtung. Beim fertigen Album erscheinen Buttons zum Vor- und Zurückblättern, sobald Sie die Maus zum jeweiligen Rand des Bildes führen.

Elegant - als automatisch ablaufende Slideshow - zeigen Sie Ihre Bilder mit dem Jsviewer. Tragen Sie die Namen der Fotos sowie die Texttitel nach dem vorgegebenen Muster in die HTML-Liste der Seite index.html ein. Die Präsentation lässt sich komplett über Tastenbefehle steuern. Eine Liste der Tastenkürzel erhalten Sie durch Klicken auf Hilfe.

Beim Internet Explorer nutzt das Skript zusätzlich Microsoft eigene Filter für einen lebhafteren Bilderwechsel.

Das mit knapp drei Kilobyte besonders leichtgewichtige Skript Dynamic Image Gallery and Slideshow dient ebenfalls der Präsentation von Bildern. Dies geschieht in Form einer Diashow. Die Fotos sind dabei als verkleinerte Vorschau im unteren Fensterbereich sichtbar, während sie darüber als Vollbilder automatisch durchlaufen.

Javascripts zum Soforteinbau

© Archiv

Multibox: Mit dem leistungsfähigen Skript lassen sich sogar beliebige HTML-Elemente in Lightbox-Optik präsentieren.

Klickt man nun eines der Vorschaubilder an, wird die Slideshow unterbrochen und das Thumbnail wird Ihnen als Vollbild eingeblendet. Die individuelle Anpassung erfolgt ähnlich wie bei Jsviewer in der Datei index.html.

Was mit HTML und CSS nicht möglich ist, leistet Swfir. Per Skript und Flash-Technik lassen sich Webbilder mit einem Schatten und runden Ecken versehen und in einem beliebigen Winkel um die eigene Achse drehen. Die Grafiken selbst bleiben dabei unverändert. Mit den vier Schritten, die in der rechten Spalte auf der Homepage des Anbieters beschrieben sind, gelangen Sie in kürzester Zeit ans Ziel.

Trockene Zahlenreihen verwandeln Sie mit dem Skript HTML-Graphs in anschauliche und bunte Balkendiagramme. Ordnen Sie die Balken entweder nebeneinander, untereinander oder als Fortschrittsbalken an. Auf der Seite example.htm finden Sie einen Generator, mit dem Sie die verschiedenen Möglichkeiten des Skripts ausprobieren können. Den Code des Skripts enthält die Datei graphs.js.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".