JavaScripts für Ihre Website

Tooltipps, Navigation, Content

Das Javascript Information Visualization Toolkit - kurz: JIT - dient als Framework für teilweise sehr ausgefallene Präsentationsformen abseits von Torten- und Balkendiagrammen. So erzeugt Rgraph mithilfe konzentrischer Kreise eine Baumstruktur.

Der Stammknoten befindet sich in der Mitte, seine Kindknoten auf dem innersten Kreis, deren Kindknoten auf dem zweitinnersten, und so weiter. Durch das Anklicken eines Knotens wird dieser zum Stammknoten und der Graph passt sich mit einer kleinen Animation entsprechend an.

Tooltips

Das Skript Tooltips zeigt beliebigen Text und HTML-Objekte als Popup-Informationen an. Beim Berühren eines entsprechenden Links mit der Maus erscheinen die Infos auf dem Bildschirm. Eine Beschreibung der Funktionen des Skripts finden Sie in der Online-Dokumentation.

Javascripts zum Soforteinbau

© Archiv

Swfir: Per Flash eingebunden lassen sich herkömmliche Bilder mit einem Schatten, runden Ecken und gedreht anzeigen.

Ein wahres Feuerwerk für Tooltip-Fans zünden Sie mit dem Javascript Tigra Hints. Lassen Sie beliebige Texte, Tabellen oder Grafiken aufpoppen, sobald Sie die Maus über entsprechende HTML-Elemente auf Ihren Webseiten halten.

Erstellen Sie mit dem Skript beispielsweise ein Popup-Fenster mit Hilfetext oder die Großansicht für eine Vorschaugrafik. Die Anleitung zeigt ausführlich, wie es geht.

Navigation

Nutzen Sie Milonic DHTML Menu, um flexibel Navigationsmenüs in Ihre Website einzufügen. Das für den professionellen Einsatz lizenzpflichtige Skript darf auf gemeinnützigen und privaten Websites kostenlos genutzt werden. Beantragen Sie dies über die Seite www.milonic.com. Erstellen Sie Menüs horizontal, vertikal oder als Imagemap.

Für Erklärungen lassen sich Tooltips zu den Menüpunkten hinzufügen. Richten Sie das Menü bei Bedarf per Maus verschiebbar ein. Per CSS lassen sich die Attribute unter anderem für Schrift, Ränder und Farben anpassen.

Mit dem Skript Tigra Menu lassen sich ebenfalls flexibel Menülösungen für Ihre Sites einrichten. Verschachteln Sie die Navigation dabei in beliebig viele Ebenen und passen Sie die Optik mit CSS nach Ihren Wünschen an.

Content

Bei Tiddlywiki ist ein komplettes Wiki in einer einzelnen Datei untergebracht. Nutzen Sie das Skript, um kompakte Dokumentationen zu erstellen, die keine auf dem Webserver installierte Programmiersprache wie PHP benötigen. Die eingegebenen Informationen speichert die Anwendung nicht in separaten Dateien, sondern in <div>- Blöcken der Webseite selbst.

Durch dynamische Ein- und Ausblendung entsteht der Eindruck von einzelnen Seiten. Bei der Syntax der Textformate und -auszeichnungen orientiert sich das Skript an den Befehlen der klassischen Wiki-Anwendungen. Von Überschriften über Trennlinien bis zu komplexen Tabellen lassen sich die üblichen Seitenobjekte einfügen.Die Nachrichten Ihres Twitter-Kanals oder die Ergebnisse einer beliebigen Twitter-Suche binden Sie mit Tweet in Ihre Seiten ein. Das Skript nutzt das Framework jQuery und zeichnet sich durch eine hohe Download-Geschwindigkeit aus. Die einzelnen Beiträge lassen sich zu Ihren Originalseiten auf der Twitter-Website verlinken.

Javascripts zum Soforteinbau

© Archiv

HTML-Graphs: Stellen Sie trockene Zahlenreihen interessanter als buntes Balkendiagramm dar.

Blenden Sie optional Ihren Avatar ein und gestalten Sie die Texte mit eigenen Stylesheets. Eine Einschränkung gibt nur das Twitter API selbst vor: Sie dürfen maximal 100 Tweets der letzten sieben Tage präsentieren. Eine ausführliche Anleitung finden Sie auf der Startseite des Anbieters.

Eine weitere sehr flexible Lösung zum Anzapfen des Microblogging-Dienstes ist Twitter.js. Bauen Sie die Nachrichten individuell aus den vorgegebenen Tweet-Bestandteilen zusammen. Jedes einzelne Element der Beiträge lässt sich über CSS-Formatklassen frei gestalten. Mit dem nur 2 KByte großen Skript Gmap binden Sie Karten aus Google Maps auf Ihren Seiten ein.

Es verwendet das Framework jQuery und steuert den Kartendienst über die eigene Programmierschnittstelle Google Maps API. Statt umfangreichen Skriptcode schreiben zu müssen, genügt ein Befehl mit diversen Parametern. Das folgende Beispiel aus der Online-Dokumentation des Anbieters zeigt, wie Sie eine Karte einbinden, auf der der gewünschte Ort markiert und beschriftet ist:

$("#map2").gMap({ markers:
[{ latitude: 47.660937, longitude: 9.569803, html: "Tettnang, Germany", popup: true }] });

Name Kurzbeschreibung URL
CSS Speech Bubbles Gestaltet Text als flexible Sprechblase www.willmayo.com/2007/02/10/css-speech-bubbles/
Sifr Ermöglicht den Einsatz ausgefallener Schriftarten wiki.novemberborn.net/sifr/
Tinyeditor Einfacher WYSIWYG-Editor www.leigeber.com/2010/02/javascript-wysiwyg-editor/
Drag and drop table content Erlaubt das Verschieben von Tabelleninhalten www.redips.net/javascript/drag-and-drop-table-content/
WMD Editor Verwandelt ein Textfeld in einen Editor wmd-editor.com
Niceforms Gestaltet Formulare modern www.emblematiq.com/projects/niceforms
Form Validation Prüft Formulareingaben www.leigeber.com/2008/04/dynamic-inline-javascript-form-validation/
JQZoom Evolution Fügt Lupenfunktion zu Bildern hinzu www.mind-projects.it/projects/jqzoom/
Magic Zoom Erstellt flexiblen Bilderzoom www.magictoolbox.com/magiczoom/
Fancyzoom Vergrößert effektvoll Grafiken www.cabel.name/2008/02/fancyzoom-10.html
Multibox Zeigt beliebige Elemente in der Lightbox an www.phatfusion.net/multibox/
Lightbox 2 Präsentiert Bilder als Lightbox-Galerie www.lokeshdhakar.com/projects/lightbox2/
Jsviewer Erzeugt eine automatische Slideshow www.jsviewer.com
Dynamic Image Gallery and Slideshow Zeigt Bilder als Galerie und Diashow www.leigeber.com/2008/05/ajax-image-gallery-slideshow/
Swfir Bettet Bilder mit Flash-Technik ein www.swfir.com
HTML-Graphs Stellt Zahlenreihen als Diagramme dar www.gerd-tentler.de/tools/graphs/
Rgraph Visualisiert Beziehungen zwischen Daten thejit.org
Tooltips Zeigt HTML-Elemente im Popup-Fenster an www.walterzorn.de
Tigra Hints Präsentiert nahezu alles in Tooltips www.softcomplex.com
Milonic DHTML Menu Erzeugt aufklappbare Menüs www.milonic.com
Tigra Menu Bietet verschiedene Menüvarianten www.softcomplex.com
Tiddlywiki Legt ein Wiki in einer Datei an www.tiddlywiki.com
Tweet Bindet einen Twitter-Kanal in die Webseite ein tweet.seaofclouds.com
Twitter.js Zeigt ebenfalls Tweets auf eigenen Seiten an remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/
Gmap Präsentiert Karten aus Google Maps gmap.nurtext.de

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.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…