Javascript-Tooltips einsetzen

Gerade auf Gebäudegrundrissen und ähnlichen Bildern ist es manchmal etwas schwer alle Informationen unterzubringen. Besser und schicker ist es da mit dem Benutzer zu interagieren und ihm einen Tooltip mit allen Informationen anzuzeigen, sobald er mit dem Mauszeigen einen bestimmten Bereich berührt.

Zu diesem Zweck nehmen wir das Bild des Grundrisses und legen eine sog. Image-Map darüber. In Microsoft Frontpage z.B. müssen Sie dazu lediglich das in die Seite eingefügte Bild markieren und über die "Bilder"-Symbolleiste sog. Hotspots zeichnen. Am besten eignen sich hierfür polygone Hotspots.

Die Definition der Test-Image-Map in diesem Artikel:

Man nennt diese Image-Maps auch "verweis-sensitive Grafiken", da man jedem definierten Bereich eine Ziel-URL zuweisen kann. In unserem Fall benötigen wir jedoch keine Sprungmarke, sondern begnügen uns mit dem Zeichen # als Ziel-String, was dazu führt, dass bei einem Klick lediglich an den Anfang der Seite zurückgesprungen wird. Zudem erhält jede AREA einen eindeutigen ID-Wert:

<area ... href="#" id="1" ... >
<area ... href="#" id="2" ... >
...

Die Verknüpfung der Image-Map an das Bild geschieht durch den IMG-Parameter USEMAP:

<img border="0" src="images/test.gif" usemap="#mapTest">

Nun müssen wir als nächstes definieren was bei einer Mausbewegung über einen der Bereiche angezeigt werden soll. Hierzu definieren wir für jede Bereichsinformation ein DIV mit zwei untergeordneten DIV's (Kopfzeile und Inhalt) und geben ihm eine eindeutige ID, die mit der in der Image-Map korrespondiert:

<div class="tooltip" style="width: 200px;" id="d1">
  <div class="head">Schlafzimmer</div>
  <div class="content">13,47 qm</div>
</div>
...

Am sinnvollsten werden die DIV's im unteren Teil des HTML-Codes angelegt, denn sie sind zum einen zunächst nicht sichtbar und zum anderen später auch nicht dort wo sie definiert sind, denn die Position ist später abhängig vom Maus-Cursor. Um das Ganze etwas aufzuhübschen legen wir im HEAD für die einzelnen DIV's CSS-Formatierungen an:

<style><!--
.tooltip {
  font-size: 10pt;
  position: absolute;
  display: none;
  background-color: #EDECF4;
  border-width: 1px;
  border-style: solid;
  border-color: #E2860E; }

.tooltip .head {
  font-weight: bold;
  background-color: #E2860E;
  color: #EDECF4;
  padding: 2px; }

.tooltip .content {
  color: #666666;
  font-weight: bold;
  padding: 4px; }
--></style>

Mit dieser Basis können wir nun daran gehen die Interaktivität einzubauen. Hierzu dienen drei JavaScript-Funktionen, die dazu dienen einen Bereich einzublenden, ihn bei Bewegung der Maus mit dem Cursor mitzuführen und ihn beim Verlassen des Bereichs wieder auszublenden:

<script><!--
  tooltip = null;
  document.onmousemove = updateTooltip;

  function updateTooltip(e) {
    try {
      x = (document.all) ? window.event.x + document.documentElement.scrollLeft: e.pageX;
      y = (document.all) ? window.event.y + document.documentElement.scrollTop: e.pageY;
      if (tooltip != null) {
        tooltip.style.left = (x + 20) + "px";
        tooltip.style.top = (y + 20) + "px";
      }
    } catch (error) { error=null; }
  }

  function showTooltip(id) {
    try {
      tooltip = document.getElementById(id);
      tooltip.style.display = "block"
    } catch (error) { error=null; }
  }

  function hideTooltip() {
    try {
      tooltip.style.display = "none";
    } catch (error) { error=null; }
  }
//--></script>

Die Funktionen werden abschließend in die Ereignisse OnMouseOver und OnMouseOut der einzelnen Image-Map-Bereiche eingetragen:

<area ... onmouseover="showTooltip('d1')" onmouseout="hideTooltip()"
... >
<area ... onmouseover="showTooltip('d2')" onmouseout="hideTooltip()" ...
>
...