Anpassbares JavaScript Tooltip mit netten Erweiterungen |
|
Mittwoch, 17. Oktober 2007
|
||||
|
Tipps die erscheinen sobald die Maus über einem Element steht. Hier erfahrt Ihr, wie das ganz einfach funktioniert. Und wie man es anpassen kann.
Hinweis: Dieser Artikel ist durch eine neue Version des Scripts, veraltet. Satte 31,4 Kilobyte hat das JavaScript was einem die Möglichkeit bietet mit Tooltips zu arbeiten. Das Gute an diesem Script ist aber die Möglichkeit nahezu alles nach belieben einstellen zu können. Nach der Einbindung des entsprechenden JavaScripts... <script type="text/javascript" src="wz_tooltip.js"></script> ...kann ein Tooltip über folgende Syntax einem Element zugewiesen werden. <img src="bild.jpg" onmouseover="Tip('ProfessorWeb ist cool')"> Und das sieht dann folgendermaßen aus:  Der hier sichtbare Tooltip ist allerdings nur das Resultat der Standardkonfiguration. In den ersten 100 Zeilen der JavaScript-Datei die wir oben eingebunden haben (wz_tooltip.js), stehen sehr sehr viele Parameter zur Verfügung, die wir nach unseren Bedrüfnissen anpassen können. Abgesehen von Standardeinstellungen, wie Hintergrundfarbe, Padding, Randfarbe, Schattengröße und -farbe, können wir noch einen Fade-Effekt konfigurieren, die Position des Tooltips verändern oder dem Ganzen einen Schließen-Button hinzufügen. Es stehen sehr viele, vielfältige Einstellungsmöglichkeiten zur Verfügung, die auch alle gut Kommentiert sind, innerhalb des Scripts. Als ob die Konfiguration über diese Datei nicht schon genug wäre, hat man außerdem noch die Möglichkeit diese Befehle im Tooltip Aufruf mitzugeben. So könnte also z.B. jeder Tooltip eine andere Farbe haben. onmouseover="Tip('ProfessorWeb ist cool', BGCOLOR, '#FF0000')" Das sieht dann z.B. so aus: Tooltip mit rotem Hintergrund, grünem oder blauen. Der Inhalt eines Tooltip muss übrigens nicht nur aus Text bestehen, es ist auch möglich z.B. Bilder darin zu laden. Erweiterungen  Mit einer zusätzlichen Erweiterung kann auch solche Ballon-Tooltips erstellen, wie man sie aus Windows XP kennt. Download Download des Tool-Tip JavaScripts Links
|
||||
| Letzte Aktualisierung ( Dienstag, 3. Juni 2008 ) | ||||
Keine Kommentare vorhanden
| < Zurück | Weiter > |
|---|
