RollOver Tooltip - Website X5 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.
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
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)
// 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
Feedbacks zu ""

Antonio da Costa

24.04.2012, 13:44

+0 -0  

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 DankeAntonio da Costa

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 11 Heute
            » 99 Gestern
            » 568 Woche
            » 457 Monat
            » 58960 Jahr
            » 283166 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt