Verweissensitive Grafik (engl. image map) ist ein Begriff aus dem Webdesign und bezieht sich auch auf Multimedia Programme. Sie bietet eine Möglichkeit, Hyperlinks innerhalb einer Grafik einzubetten. Diese werden mit dem Attribut "shape" als rechteckige ("rect"), runde ("circle") oder freie ("poly") Schaltflächen realisiert, die sich wie Verweise (Anchor-Links) im Hypertext eines HTML-Dokumentes verhalten. In der Regel deutet ein sich verändernder Mauszeiger auf die nicht sichtbaren Schaltflächen hin.
Eine in HTML definierte Image Map besteht aus einem eigentlichen Bild, das mit einem <img>-Tag definiert wird. Gleichzeitig wird bei diesem ein Attribut "usemap" angegeben, das auf die Image Map verweist.
Eine Image Map besteht aus dem <map>-Tag sowie aus einzelnen <area>-Tags, die die eigentlichen Definitionen der Bereiche darstellen, auf die geklickt werden kann. Diese definieren, vergleichbar mit der Definition bei einem <a>-Tag, welche URL aufzurufen ist. Die Koordinaten der jeweiligen Bereiche kann zum Beispiel mit den Grafik Werkzeugen von Gimp herausfinden.
Ein Beispiel einer Image Map:
<img src="/images/stories/lakes.jpg" alt="" width="450" height="339" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="134,87,145,106" nohref" alt="Oberer See" /> <area shape="rect" coords="151,210,165,226" href="##" alt="Michigan See" /> ... </map>
Man kann seit der jmootips Version 1.1.1 Tooltips innerhalb von Bildern via Image Maps platzieren. (Hinweise: Diese Möglichkeit ist nicht verfügbar, wenn das Bootstrap Javascript Framework für jmootips verwendet wird. Desgleichen kann es sein, daß Microsofts Iinternet Explorer Tooltips in diesem Fall gar nicht anzeigt. Eine Lösung für Bootstrap bzw. Internet Explorer wird im zweiten Teil dieses Artikels aufgezeigt).
Um Tooltips mit Image Maps zu verwenden, bindet man <area>-tags mit Tooltip Tags ein:
{tip id="127" position="above"}<area shape="rect" coords="120,85,156,118" href="#" alt="Oberer See" />{/tip}jmootips verwendet das shape-Attribut und coords-Attribut, um Tooltips innerhalb von Bildern zu positionieren.
Beispiel einer Image Map mit Tooltips
Um einen Tooltip anzuzeigen, bewegt man den Mouse-Zeiger auf eines der Fragezeichen im Bild:
Hinweis: Mit der Verwendung des Bootstrap Javascript Framework werden die Tooltips nicht korrekt platziert.
Diese Lösung, Tooltips innerhalb von Bildern (Images) darzustellen, läuft auch mit dem Mootools Javascript Framework. Folgende drei Schritte beschreiben (in einem Beispielbild), wie diese Lösung implementiert werden kann:
-
Den <img>-Tag in ein a <div>-Element umsetzen:
aus:<img src="/images/stories/lakes.jpg" alt="" width="450" height="339" border="0" usemap="#Map" />
wird:<div style="position:relative;width:450px;height:339px;background-image:url(/images/stories/lakes.jpg);">
-
Die <area>-Tags in <a>-Tags konvertieren:
aus:<area shape="rect" coords="134,87,145,106 nohref alt="Oberer See" />
wird:<a nohref style="opacity:0;position:absolute;top:85px;left:134px;width:20px;height:30px"></a>
-
Zusammen mit jmootips Tooltip-Tags wird eine neue "Image Map" erstellt:
<div style="position:relative;width:450px;height:339px;background-image: url(/images/stories/lakes.jpg);"> {tip id="141"}<a nohref style="opacity:0;position:absolute;top:85px;left:120px;width:20px;height:30px"></a>{/tip} {tip id="142"}<a nohref style="opacity:0;position:absolute;top:206px;left:142px;width:20px;height:30px"></a>{/tip} {tip id="143" width="350"}<a nohref style="opacity:0;position:absolute;top:175px;left:236px;width:20px;height:30px"></a>{/tip} {tip id="144"}<a nohref style="opacity:0;position:absolute;top:260px;left:269px;width:20px;height:30px"></a>{/tip} {tip id="145"}<a nohref style="opacity:0;position:absolute;top:208px;left:350px;width:20px;height:30px"></a>{/tip} </div>
Um einen Tooltip anzuzeigen, bewegt man den Mouse-Zeiger auf eines der Fragezeichen im Bild: