Hier kannst Du das Ganze runter laden:
OverLib
Und als Anhang die Kurzanleitung die ich mir zur eigenen Übersicht zusammengestellt habe:
Dokumentation OverLib (Tooltip)
OberLib erzeugt Infoboxen beim überfahren eines Links oder einer Grafik, ohne dass diese Angeklickt werden müssen. Da eine Infografik einen Link braucht, dieser aber ohne Funktion sein soll, wird das Laden mit einem JavaScript verhindert.
In den Header:
<script language="Javascript" src="overlib_js/overlib.js"></script>
Irgendwo in den Body:
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
Wirkungsloser Link:
<href="javascript:void(0);"></a>
Aufbau
Das onmouseout ist immer das Selbe: onmouseout="return nd();"
Aufgerufen und gesteuert werden die Tooltips über onmouseover. Dabei ist folgende Syntax zu beachten:
Die Befehle und Werte sind durch Komma (,) zu trennen. Befehle sind in GROSSBUCHSTABEN zu schreiben. Werte sind in Hochkomma ('
zu setzen.
Es kommt immer erst der Befehl, dann der jeweilige Wert.
Die Reihenfolge der Befehle ist beliebig. Ausnahme: Erster Wert ist immer der Inhaltstext des Tooltips. Dieser Wert ist der Einzige der keinen Befehl benötigt. Es gibt Befehle die einen Wert benötigen, Andere Befehle benötigen keinen Wert.
In der Datei overlib.js sind Standardwerte für Farben Schrift und Rahmen definiert. Diese können dort grundsätzlich angepasst werden, wenn man nur die Standarddarstellung verwenden will. Möchte man unterschiedliche Darstellungen und Farben einsetzen, werden diese jeweils im onmouseover definiert.
LEFT, hängt den Tooltip links an den Mauszeiger (kein Wert)
CENTER, richtet den Tooltip zentriert aus (kein Wert)
RIGHT, hängt den Tooltip rechts an den Mauszeiger (kein Wert)
BELOW, richtet den Tooltip unterhalb des Mauszeigers aus. (kein Wert)
ABOVE, richtet den Tooltip oberhalb des Mauszeigers aus. (kein Wert)
WIDTH, Breite des Tooltips (Pixel)
HEIGHT, Höhe des Tooltips (Pixel)
FGCOLOR, Hintergrundfarbe (#000000)
BGCOLOR, Rahmenfarbe (#000000)
BORDER, Rahmenstärke (5)
TEXTCOLOR, Textfarbe (#000000)
TEXTSIZE, Textgrösse (11px)
CAPTION, erzeuugt einen Titelbalken über dem Tooltip. Balkenfarbe identisch mit Rahmenfarbe (Titeltext)
CAPCOLOR, Textfarbe des Titelbalkens (#000000), ohne Angabe Farbe des Rahmens
CAPTIONSIZE, Textgrösse des Titelbalkens (16px)
CAPICON, Grafik vor dem Titeltext (img/sym/meldung.jpg)
TEXTFONTCLASS, CSS Klasse für Text (Klassenname)
CAPTIONFONTCLASS, CSS Klasse für Titel (Klassenname)
CLOSECOLOR, Textfarbe des 'schliessen'-Links im Titelbalken (#000000)
CELLPAD, Abstand vom Text zum Rahmen, gilt nicht für den Titelbalken (2)
OFFSETX, Verschiebung von der Maus rechts, negativer Wert nach links (10)
OFFSETY, Verschiebung nach unten, negativer Wert nach oben (obere Kante) (10)
Beispiele:
Standard Tooltip
<a href="javascript:void(0);" onmouseover="return overlib('Tooltiptext: standard', LEFT, ABOVE, FGCOLOR, '#ffffff'
;" onmouseout="return nd();">...</a>
Popup haftend
<a href="javascript:void(0);" onmouseover="return overlib('Tooltiptext: haftend', STICKY, MOUSEOFF, BGCOLOR, '#000000'
;" onmouseout="return nd();">...</a>
Diese Funktionsbeschreibung ist nicht vollständig, allerdings reicht sie für den normalen Gebrauch völlig. Weitere Informationen in den Originaldokumenten.
Zusammenfassung: René A. Da Rin, St.Gallen, August 2005, © Erik Bosrup,
http://www.bosrup.com/web/overlib/
