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:
Der Obere See (englisch Lake Superior, französisch Lac Supérieur) ist der größte der fünf Großen Seen Nordamerikas sowie das nach dem Kaspischen Meer flächenmäßig zweitgrößte Binnengewässer der Erde und damit der flächenmäßig größte Süßwassersee (tiefster und vom Volumen her größter Süßwassersee ist der Baikalsee in Sibirien). Durch den Oberen See verläuft die Grenze zwischen Kanada und den Vereinigten Staaten. Sein Wasserspiegel liegt auf 184 m bei einer Gesamtfläche von 82.103 km² (entspricht etwa der Größe Österreichs). Seine größte Tiefe beträgt 406 m, vom nördlichsten Punkt bis zum südlichsten beträgt die Entfernung 290,2 km, die größte Ost-West-Ausdehnung beträgt 599,6 km. Der Obere See grenzt im Norden an die Provinz Ontario in Kanada (kanadischer Seeanteil 29.847 km², amerikanischer Seeanteil 52.256 km²) und den US-Bundesstaat Minnesota, im Süden an die US-Bundesstaaten Wisconsin und Michigan.
Der Michigansee (engl. Lake Michigan) gehört zur Gruppe der fünf Großen Seen Nordamerikas. Er liegt 176 m hoch, hat eine Fläche von 58.016 km² und eine maximale Wassertiefe von 281 m (zum Vergleich: die Schweiz hat eine Fläche von 41.287 km²). Seine Länge beträgt 494 km, seine Breite 190 km und das Ufer erstreckt sich über 2633 km. Als einziger der Großen Seen liegt er vollständig in den USA, er grenzt an die Bundesstaaten Indiana, Illinois, Wisconsin und Michigan.
Der Huronsee (auch Huron-See, englisch Lake Huron) gehört zur Gruppe der fünf Großen Seen Nordamerikas. Durch ihn verläuft die Grenze der Vereinigten Staaten zu Kanada. Er grenzt an den US-Bundesstaat Michigan und an die kanadische Provinz Ontario. Der Huronsee liegt auf 176 m Höhe, seine Fläche beträgt 59.586 Quadratkilometer, als maximale Wassertiefe wurden 229 Meter ermittelt. Der kanadische Seeanteil beträgt 36.351 km², der US-amerikanische beträgt 23.235 km².
Der Eriesee (engl. Lake Erie) ist der südlichste und viertgrößte der fünf Großen Seen Nordamerikas. Der Name leitet sich von den Erie-Indianern ab. Durch ihn verläuft die Grenze der Vereinigten Staaten zu Kanada. Der Zufluss erfolgt über den Detroit River. Über die Niagarafälle entwässert er in den Ontariosee. Der Eriekanal verbindet den See mit dem 580 Kilometer südlich gelegenen Hudson River.
Der Ontariosee (englisch Lake Ontario; französisch Lac Ontario) ist der flächenmäßig kleinste der fünf Großen Seen Nordamerikas, die miteinander durch Flussläufe verbunden sind.
Durch den Ontariosee verläuft die Grenze der Vereinigten Staaten zu Kanada. Er liegt auf 75 m Höhe und seine Fläche beträgt 19.011 km². Der kanadische Seeanteil beträgt 9969 km² und der amerikanische Seeanteil beträgt 9042 km². Zum Vergleich: Seine Ausdehnung entspricht ungefähr der Größe des deutschen Bundeslandes Rheinland-Pfalz; die Fläche des größten Sees Europas, des Ladogasees, übertrifft er um rund 1000 km².
Viele Anwender und Entwickler haben Erweiterungen (mehr als 7.700 sind es Zeit) für Joomla erstellt, die sie der Nutzergemeinde meist kostenfrei zur Verfügung stellen.