Tooltipps mit Overlib
Overlib ist eine kleine, handliche JavaScript-Bibliothek, mit der sich auf einfache Art und Weise Tooltipps erzeugen lassen, die sowohl Grafiken wie auch Text (HTML-Code) enthalten können.
Download
Dokumentation und Download von Overlib
Das Download-Archiv enthält die Datei overlib.js sowie weitere Dateien die overlib-irgendwie.js heißen. Dabei handelt es sich um sogenannte Plug-Ins für Overlib. Dazu später mehr. Für die Standardfunktionen ist overlib.js ausreichend.
Es gibt außerdem in der zip-Datei den Ordner Mini. In diesem Ordner befinden sich komprimierte Dateien mit den gleichen Funktionen.
Einbindung
Zunächst wird die Bibliothek im Kopfbereich, also noch vor </head> eingebunden.
<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
Direkt nach <body> wird der folgende Code eingebunden:
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
Der eigentliche Tooltip wird dann mit Hilfe des HTML-Codes für einen Link (ohne Linkziel) erstellt. Das sieht dann so aus:
<a onmouseover="return overlib('POPUP -gewöhnlich.');" onmouseout="return nd();" href="javascript:void(0);"> Berühr mich</a>
Dieses einfache sowie drei weitere einfache Beispiele kann man auf der Seite Basisbeispiele ansehen.
Komplexere Inhalte
Einem Overlib-Fenster kann nicht nur einfacher Text sondern komplexer HTML-Code übergeben werden. So war bereits im Beispiel 1-2 zu sehen, dass ein Teil des Textes fett formatiert war.
Dies kann man noch weit ausgiebiger nutzen. Es können bestimmte Textteile in anderer Farbe dargestellt oder Grafiken eingebunden werden. dabei ist es jedoch wichtig, dass der HTML-Code maskiert wird. Sonst ist vor allem bei HTML-Code mit Anführungszeichen keine Anzeige des Overlib-Popup möglich. Zum Maskieren des HTML-Code gibt es entsprechende Online-Tools (Maskieren Online). Bei HTML-Editoren mit WYSIWYG kann man einfach zunächst einen normalen Code erzeugen, von dem dann den Quellcode kopieren und im Entwurfmodus einfügen.
Beispiele mit komplexeren Inhalten
Erscheinungsform des Overlib-Popups modifizieren
Bisher habe ich gezeigt wie man den eigentlichen Inhalt verändert und variabel gestaltet. Nun geht es darum, das Aussehen des Overlib-Popups insgesamt zu verändern. Dafür gibt es drei Möglichkeiten:
Im Quellcode von overlib.js
Man findet gleich zu Anfang der Datei overlib.js einen Abschnitt mit einer ganzen Reihe von Festlegungen. Es ist so aus (Auschnitt):
//////// // DEFAULT CONFIGURATION // Settings you want everywhere are set here. All of this can also be // changed on your html page or through an overLIB call. //////// if (typeof ol_fgcolor=='undefined') var ol_fgcolor="#CCCCFF"; if (typeof ol_bgcolor=='undefined') var ol_bgcolor="#333399";
Wenn man diese Werte verändert, dann wirkt sich das auf alle Webseiten des Webprojektes aus in denen die veränderte Datei overlib.js eingebunden ist.
Script-Abschnitt in der einzelnen HTML-Datei
Man fügt in der HTML-Datei noch vor dem einbinden der datei overlib.js einen Abschnitt ein, in dem die angepassten Variablen deklariert werden.
Mit diesem Abschnitt werden schwarz-weiß-Popups erzeugt
<script type="text/javascript"> var ol_fgcolor = "#FFFFFF"; var ol_bgcolor = "#000000"; </script> <script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
Der Code gilt dann für alle Popups der entsprechenden Webseite.
Direkt beim Aufruf
Man kann schließlich noch Befehle in den Popup-Aufruf einbauen, die dann nur das Aussehen des jeweiligen Popups verändern. Ein entsprechender Code sieht dann so aus:
<a href="javascript:void(0);" onmouseover="return overlib('Andere Schriftart.',TEXTFONT,'Courier, Courier New');" onmouseout="return nd();">Mein Link</a>
Beispiele mit angepassten Popups
Plug-Ins für Overlib
Im Download-Paket befinden sich insgesamt zehn Plugins.
- Centerpopup - positioniert das Overlib-Popup in der Mitte des Browser-Fensters
- Crossframe
- Exclusive
- Hide Form
- Anchor
- Follow Scroll
- Shadow
- CSSSTYLE
- Debug
- Setonoff
Neben diesen offiziellen Plugins gibt es weitere inoffizielle Plugins.
Einbindung
Die Einbindung eines Plug-Ins erfolgt analog zur Einbindung des Hauptmoduls:
<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script> <script type="text/javascript" src="overlib_PLUGIN_NAME.js></script>