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:
<map name="mapTest">
<area shape="polygon" coords="32, 17, 95, 17, 97, 68, 33, 70">
<area shape="polygon" coords="33, 73, 76, 70, 77, 103, 34, 104">
<area shape="polygon" coords="77, 71, 95, 70, 96, 123, 77, 124">
<area shape="polygon" coords="44, 106, 76, 105, 76, 125, 44, 125">
<area shape="polygon" coords="43, 124, 95, 124, 96, 175, 42, 174">
<area shape="polygon" coords="11, 176, 96, 176, 95, 283, 13, 284">
<area shape="polygon" coords="96, 17, 129, 16, 130, 41, 96, 42">
<area shape="polygon" coords="129, 16, 162, 16, 161, 43, 129, 42">
<area shape="polygon" coords="95, 44, 160, 43, 160, 108, 96, 109">
<area shape="polygon" coords="95, 110, 160, 109, 160, 156, 97, 157">
<area shape="polygon" coords="97, 158, 159, 158, 160, 206, 97, 207">
<area shape="polygon" coords="97, 209, 160, 207, 162, 284, 99, 286">
</map>
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()" ...
>
...