RollOver Tooltip - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
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.
Die Konfiguration erfordert ein wenig Geschick, 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". Dies kann aber auch durch einen Doppelklick ausführt werden.
Download Button
x runter geladen
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" width="400" height="270" alt="Person 6" usemap="#TtipObj21"/>
Code Datei "tooltip.js" (Ausschnitt Konfiguration)
// Erläuterungen dazu wegen Überlänge in der Original-Datei
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

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt