Tooltips

  • Dieses Script kann für alle Versionen von web to date gleichermaßen eingesetzt werden.

In diesem Abschnitt wird die Einbindung von Tooltips erklärt, also einer Möglichkeit dem Besucher zusätzliche Informationen zu liefern wenn er mit der Maus über Links oder Formularfelder geht.

Beispiele

Ein Tooltip kann auf HTML-Elemente, wie Links und Formularfelder, angewendet werden. Wenn Sie mit der Maus über diesen Link gehen, werden Sie einen Tooltip sehen.
Tooltips können beliebig per HTML gestaltet werden, z.B. können auch Bilder in einem Tooltip angezeigt werden: Bild 1 - Bild 2
Und hier ist ein Beispiel für ein Formularfeld:


Anleitung - in 4 Schritten zum Ziel

1. Schritt:

Laden Sie sich die Datei tooltip.js [32 KB] (Vers. 4) herunter und kopieren Sie diese in das entsprechende Designverzeichnis Ihrer web to date-Website, z.B. nach C:\Programme\DATA BECKER\web to date\designs\ludo\

2. Schritt:

  • Öffnen Sie in diesem Designverzeichnis die Datei navigation.ccml mit einem Editor.
  • Fügen Sie zwischen den beiden Head-Tags (also zwischen <head> und </head>) folgende Zeile ein:
  • <script language="JavaScript" src="<cc:print value="&tooltipjs.url">" type="text/javascript"></script>
  • Speichern Sie die Datei navigation.ccml .

3. Schritt:

  • Öffnen Sie in diesem Designverzeichnis die Datei global.ccml mit einem Editor.
  • Fügen Sie folgende Zeile ein:
  • <cc:asset src="tooltip.js" dst="tooltip.js" obj="tooltipjs">
  • Speichen Sie die Datei global.ccml.

4. Schritt:

Erstellen Sie in web to date einen HTML-Absatz und fügen Sie z.B. folgenden Text ein:

<script language="JavaScript" src="/assets/tooltip.js" type="text/javascript"></script>

Ein
<font color="red" onmouseover="Tip('Mit einem Doppelklick auf dieses Wort<br>erfahren Sie mehr über den Begriff.',TITLE,'',OPACITY,85)"><b>Tooltip</b></font>
kann auf HTML-Elemente, wie Links und Formularfelder, angewendet werden. Wenn Sie mit der Maus über diesen
<a href="#" onmouseover="Tip('Dies ist ein Tooltip.')">Link</a>
gehen, werden Sie einen Tooltip sehen.
<br>
Tooltips können beliebig per HTML gestaltet werden, z.B. können auch Bilder in einem Tooltip angezeigt werden:
<a href="#" onmouseover="Tip('<img src=/images/rtseye.jpg>',TITLE,'Bild1')">Bild 1</a>
-
<a href="#" onmouseover="Tip('<img src=/images/webtodate_160.gif>',TITLE,'Bild 2')">Bild2</a>
<br>
oUnd hier ist ein Beispiel für ein Formularfeld:
<input type="text" onmouseover="Tip('Bitte geben Sie hier Ihren Namen ein.',TITLE,'Eingabe NAME')">

Experten-Tipp:
Wenn Sie mit der Maus über ein Tooltip-Bild gehen wird das Bild erst in diesem Moment geladen. Bei größeren Bildern kann es vorkommen, dass das Bild nur teilweise angezeigt wird. Abhilfe schafft das zusätzliche Einbinden des Bildes in ein "verstecktes" HTML-Element. Das Bild wird dann schon beim Aufbau der Seite komplett geladen und der Browser erhält dann beim Tooltip das Bild aus dem Cache.
Syntax für ein verstecktes HTML-Element:
<span style="display:none"> <img src="...URL des Bildes..."> </span>

Quellverweis

  Link Beschreibung
JavaScript, DHTML
Tooltips
JavaScript Bibliothek zum Download. 		Website: http://www.walterzorn.de/tooltip/tooltip.htm (Der Autor des Tools ist Mitte 2009 verstorben, seine Website ist seit dieser Zeit offline) Dieses kostenlose Tooltip-JavaScript erzeugt Tooltips, kleine Informations-Boxen über HTML-Elementen. Die Verwendung dieses Scripts ist sehr einfach. Um über einem HTML-Element ein Tooltip erscheinen zu lassen, genügt ein onmouseover-Eventhandler mit dem jeweils gewünschten Tooltip-Text.