jmootips und Image Maps

jmootipsVerweissensitive 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>

Image Map mit Tooltips

Mit jmootips Version 1.1.1 kann man 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:

Lake Huron Lake Erie Lake Ontario

 

Image Map mit HTML/CSS Definitionen

Image Map mit HTML/CSS Definitionen

Das Bootstrap Javascript Framework mit seinen Tooltip-Plugins positioniert Tooltips nicht korrekt, wenn eine Image Map mit <area>-Tags verwendet wird. Dieses Problem läßt sich lösen, indem man den HTML <img>-Tag und die <area>-Tags in HTML- und CSS-Definitionen "übersetzt" (konvertiert).
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:
  1. 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);">
    
  2. 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>
    
  3. 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"}<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>
    
Hier das Bild mit eingebetteten Tooltips (Resultat der obigen Definitionen):

 

Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Ok