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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…
News
Minecraft-Server waren das ursprüngliche Ziel
Alternative zu MacBook Pro und Surface Book
Blockchain-Plattform für Schweizer Großbank