Mouseover Tooltip - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Mouseover Tooltip

Scripte > Bildobjekte


Eine einfache Tooltip-Möglichkeit bei Mousover.

JavaScript


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 ""

es gibt insgesamt 1 Kommentar(e)


  1. Antonio da Costa http://www.schnaidtgmbh.de schreibt am 24.04.2012, 15.44 Uhr

    Hi, habe eine Map als JPG und möchte mehrer bereiche mit einem Tooltip ausstatten. Im Tooltip soll aber auch nocheinmal ein Bild und Text vorkommen. Die Map ist ist farblich in vier Bereiche eingeteilt jeder dieser Bereiche soll einen Tooltip erhalten. Kannst du mir da helfen? Beste Grüße und Danke Antonio da Costa


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 18 Online
 » 100 Heute
 » 860 Woche
 » 3647 Monat
 » 52875 Jahr
 » 299453 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü