RollOver Tooltip - Website X5 Hilfe - Die Helpsite

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

RollOver Tooltip

Scripte > Bildobjekte
Eine einfache Tooltip-Möglichkeit bei Mousover

Tooltips werden immer beliebter. Beim Überfahren eines Bildes mit der Maus wird üblicher Weise ein

title="..."  bei jedem Bild hinterlegt. Um mehr Informationen anzuzeigen und/oder sogar nur Ausschnitte auf dem Bild gemäß Beispiel zu hinterlegen, bietet sich ein separates Tooltip-Script (JavaScript) besonders an. Die Anpassungen des Tooltips selbst erfolgen in der Datein "tooltip.js".
Bei Verwenung für den Bildausschntt-Tooltip müssen für jedes Bild die entsprechenden Koordinaten hinterlegt werden. Dazu vorab mit einem Bildprogramm die anzuzeigende Bildgröße zur Bearbeitung im Koordinatenprogramm festlegen, da die Koordinaten fest verankert werden. Danach darf die Bildgröße nicht mehr verändert werden, sonst passen die Koordinaten für den Tooltip nicht mehr. Der Einbau ist relativ einfach:
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HTML-Code in den in den BODY-Bereich <body>...</body> der ausführenden Seite an gewünschter Stelle einfügen und und Bilder gemäß Vorlage einfach nur austauschen und evtl. die Bildgröße anpassen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese lässt sich aber auch durch einen Doppelklick ausführen.



Download Button
Downloads:
Als Zugabe haben wir das Windows-Programm "FastImageMap" zum erstellen von Koordinaten und die zugehörige Koordinatendatei "tooltip_obj26.fim" beigefügt (siehe: Tooltip mit Imagemap und Bildlink). Über eine kleine Spende für unseren Aufwand würden wir uns sehr freuen.

Zur Beachtung:
Apostrophe innerhalb des Tooltip-Textes müssen mit Backslashes maskiert werden.
Beispiel: tip('Mit meiner Freundin auf dem Ku\'damm spazieren gehen.')
Einfacher Tooltip mit Seitenlink:
Tooltip mit Imagemap und Bildlink:
Person 6
Code für den <BODY> Bereich
<script src="wsX5Obj/Obj21_0/tooltip.js"></script>
<a href=
"http://x5forum.home-wiekau.de/wsx5sys06.php"
onmouseover="Tip('Hier klicken zum Gästebuch.')"
onmouseout="UnTip()" />
<img src="wsX5Obj/Obj21_0/personen_05.jpg"
alt="Person 5" width="400" height="270" />
</a>
Code für den <BODY> Bereich
<script src="wsX5Obj/Obj21_0/tooltip.js"></script>
<map name="TtipObj21" id="TtipObj21">
<area shape="circle" coords="106,130,111"
href=
"wsX5Obj/Obj21_0/personen_06g.jpg" target="_blank"
onMouseover="Tip('Das ist Talinki, Klick...')"
onMouseout="UnTip()" />
</map>
<img src="wsX5Obj/Obj21_0/personen_06.jpg"
alt="Person 6" width="400" height="270" usemap="#TtipObj21" />
Code Datei "tooltip.js" (Ausschnitt Konfiguration)
var tt_Debug = true
var tt_Enabled = true
var TagsToTip = true
config. Above = false
config. BgColor = '#E2E7FF'
config. BgImg = ''
config. BorderColor = '#003099'
config. BorderStyle = 'solid'
config. BorderWidth = 1
config. CenterMouse = false
config. ClickClose = false
config. ClickSticky = false
config. CloseBtn = false
config. CloseBtnColors = ['#990000', '#FFFFFF', '#DD3333', '#FFFFFF']
config. CloseBtnText = '&nbsp;X&nbsp;'
config. CopyContent = true
config. Delay = 400
config. Duration = 0
config. Exclusive = false
config. FadeIn = 100
config. FadeOut = 100
config. FadeInterval = 30
config. Fix = null
config. FollowMouse = true
config. FontColor = '#000044'
config. FontFace = 'Verdana,Geneva,sans-serif'
config. FontSize = '8pt'
config. FontWeight = 'normal'
config. Height = 0
config. JumpHorz = false
config. JumpVert = true
config. Left = false
config. OffsetX = 14
config. OffsetY = 8
config. Opacity = 100
config. Padding = 3
config. Shadow = false
config. ShadowColor = '#C0C0C0'
config. ShadowWidth = 5
config. Sticky = false
config. TextAlign = 'left'
config. Title = ''
config. TitleAlign = 'left'
config. TitleBgColor = ''
config. TitleFontColor = '#FFFFFF'
config. TitleFontFace = ''
config. TitleFontSize = ''
config. TitlePadding = 2
config. Width = 0
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2020





Besucher Statistik
» 2 Online
» 159 Heute
» 445 Gestern
» 1281 Woche
» 6684 Monat
» 6684 Jahr
» 477352 Gesamt
Record: 1396 (02.01.2020)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt