Mouseover Tooltip - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

Mouseover Tooltip

Scripte > Bildobjekte


Eine einfache Tooltip-Möglichkeit bei Mousover.


Image auf den Server in das Verzeichnis "images" kopieren.
Example:
demo_img1.jpg


Demo:

Foto Home


Code für das HTML-Objekt:

<script type="text/javascript" src="files/tooltip.js"></script>

<a href="#" onmouseover="Tip('Das ist ein Tooltip, der auch anderweitig als Text genutzt werden kann.')" onmouseout="UnTip()" /><img alt='Foto Home' src='http://www.x5forum.home-wiekau.de/images/demo_img1.jpg'  width='360' height='280' border='0' /></a>



Hierzu wird die Datei "tooltip.js" benötigt.
Diese kann hier herunter geladen werden: KLICK HERE


ZIP-Datei entpacken und auf den Server in das Verzeichnis "files" kopieren.




Der Tooltip kann auch für eine ImageMap genutzt werden. Das sollte ungefähr so aussehen (Das Auto):


Code für das HTML-Objekt:

<script type="text/javascript" src="files/tooltip.js"></script>

<map name="test" id="tooltip1">
<area shape="rect" coords="183,135,271,194" href="#" onMouseover="Tip('Das ist ein Auto.')" onMouseout="UnTip()" alt="" />
</map>
<img src="images/demo_img1.jpg" width="360" height="280" border="0" alt="" title="" usemap="#tooltip1" />



Hierzu wird die Datei "tooltip.js" benötigt.
Diese kann hier herunter geladen werden:
KLICK HERE


ZIP-Datei entpacken und auf den Server in das Verzeichnis "files" kopieren.



Achtung:
Apostrophe innerhalb des Tooltip-Textes müssen deshalb mit Backslashes maskiert werden.
Beispiel:
Tip('Mit meiner Freundin auf dem Ku\'damm spazieren gehen.')

In der Datei "tooltip.js" können Veränderungen am Style vorgenommen werden.


Feedbacks zu ""


Kein Kommentar
Vielen Dank für Dein Feedback.
Logo HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 1 Online
» 190 Heute
» 650 Gestern
» 2359 Woche
» 9591 Monat
» 64134 Jahr
» 310712 Gesamt
Record: 1420 (10.04.2014)
Zurück zum Seiteninhalt