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 titel= Verweis bei jedem Bild hinterlegt. Um mehr Informationen anzuzeigen oder sogar nur Ausschnitte auf dem Bild gemäß Beispiel zu hinterlegen, bietet sich ein separates Tooltip-Script (JavaScript) besonders an.

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 Bilder gemäß Vorlage einfach nur austauschen und evtl. die Bildgröße anpassen. Eine "demo.html" ist ebenfalls im ZIP-Paket enthalten.

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.

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.
Einfacher Tooltip mit Seitenlink:
Tooltip mit Imagemap und Bildlink:
Person 6
Code für den <BODY> Bereich
<script language="javascript" src="wsX5Obj/Obj21_0/wz_tooltip.js">
</script>

<a href="http://x5forum.home-wiekau.de/wsx5sys06.php"
onmouseover="Tip(
'Hier klicken und Sie gelangen zum Gästebuch.')"
onmouseout="UnTip()" />
<img alt='Person 5'
src='wsX5Obj/Obj21_0/personen_05.jpg'
width='400' height='270' />
</a>
Code für den <BODY> Bereich
<script language="javascript" src="wsX5Obj/Obj21_0/wz_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 alt='Person 6' src='wsX5Obj/Obj21_0/personen_06.jpg'
width='400' height='270' usemap="#TtipObj21" />
Code Datei "wz_tooltip.js" (Config-Ausschnitt)
config. Above = false // false or true - tooltip above mousepointer
config. BgColor = '#E2E7FF' // Background colour (HTML colour value, in quotes)
config. BgImg = '' // Path to background image, none if empty string ''
config. BorderColor = '#003099'
config. BorderStyle = 'solid' // Any permitted CSS value, but I recommend 'solid', 'dotted' or 'dashed'
config. BorderWidth = 1
config. CenterMouse = false // false or true - center the tip horizontally below (or above) the mousepointer
config. ClickClose = false // false or true - close tooltip if the user clicks somewhere
config. ClickSticky = false // false or true - make tooltip sticky if user left-clicks
config. CloseBtn = false // false or true - closebutton in titlebar
config. CloseBtnColors = ['#990000', '#FFFFFF', '#DD3333', '#FFFFFF'] // [Background, text, hovered background, hovered text] - use empty strings '' to inherit title colours
config. CloseBtnText = '&nbsp;X&nbsp;' // Close button text (may also be an image tag)
config. CopyContent = true // When converting a HTML element to a tooltip, copy only the element's content, rather than converting the element by its own
config. Delay = 400 // Time span in ms until tooltip shows up
config. Duration = 0 // Time span in ms after which the tooltip disappears; 0 for infinite duration, < 0 for delay in ms _after_ the onmouseout until the tooltip disappears
config. Exclusive = false // false or true - no other tooltip can appear until the current one
config. FadeIn = 100 // Fade-in duration in ms, e.g. 400; 0 for no animation
config. FadeOut = 100
config. FadeInterval = 30 // Duration of each fade step in ms (recommended: 30) - shorter is smoother
config. Fix = null // Fixated position, two modes. Mode 1: x- an y-coordinates in brackets, e.g. [210, 480]. Mode 2: Show tooltip at a position related to an HTML element: [ID of HTML element, x-offset, y-offset from HTML element], e.g. ['SomeID', 10, 30]. Value null (default) for no fixated positioning.
config. FollowMouse = true // false or true - tooltip follows the mouse
config. FontColor = '#000044'
config. FontFace = 'Verdana,Geneva,sans-serif'
config. FontSize = '8pt' // E.g. '9pt' or '12px' - unit is mandatory
config. FontWeight = 'normal' // 'normal' or 'bold';
config. Height = 0 // Tooltip height; 0 for automatic adaption to tooltip content, < 0 (e.g. -100)
config. JumpHorz = false // false or true - jump horizontally to other side of mouse if tooltip would extend past clientarea boundary
config. JumpVert = true // false or true - jump vertically "
config. Left = false // false or true - tooltip on the left of the mouse
config. OffsetX = 14 // Horizontal offset of left-top corner from mousepointer
config. OffsetY = 8 // Vertical offset
config. Opacity = 100 // Integer between 0 and 100 - opacity of tooltip in percent
config. Padding = 3 // Spacing between border and content
config. Shadow = false // false or true
config. ShadowColor = '#C0C0C0'
config. ShadowWidth = 5
config. Sticky = false // false or true - fixate tip, ie. don't follow the mouse and don't hide on mouseout
config. TextAlign = 'left' // 'left', 'right' or 'justify'
config. Title = '' // Default title text applied to all tips (no default title: empty string '')
config. TitleAlign = 'left' // 'left' or 'right' - text alignment inside the title bar
config. TitleBgColor = '' // If empty string '', BorderColor will be used
config. TitleFontColor = '#FFFFFF' // Color of title text - if '', BgColor (of tooltip body) will be used
config. TitleFontFace = '' // If '' use FontFace (boldified)
config. TitleFontSize = '' // If '' use FontSize
config. TitlePadding = 2
config. Width = 0 // Tooltip width; 0 for automatic adaption to tooltip content; < -1 (e.g. -240) for a maximum width for that automatic adaption;
// -1: tooltip width confined to the width required for the titlebar
Bitte beachten:
Apostrophe innerhalb des Tooltip-Textes müssen mit Backslashes maskiert werden.
Beispiel:
Tip('Mit meiner Freundin auf dem Ku\'damm spazieren gehen.')
In der Datei "wz_tooltip.js" können die Veränderungen am Stylesheet vorgenommen werden.

Feedbacks zu ""


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

© 2009 - 2018





Besucher Statistik
» 3 Online
» 557 Heute
» 469 Gestern
» 1792 Woche
» 5743 Monat
» 75564 Jahr
» 322142 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt