jmootips Infos App mit SMS teilen


Teile die jmootips Infos App mit dem Senden einer SMS
jmootips Infos https://jschmidt-systemberatung.de/index.php?option=com_content&view=article&id=146:jmootips-und-image-maps&catid=69&lang=de&layout=blog&Itemid=427

 

 

Information teilen:

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>

 

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:

Lake Huron Lake Erie Lake Ontario

Hinweis: Mit der Verwendung des Bootstrap Javascript Framework werden die Tooltips nicht korrekt platziert.

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" 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>
    
Hier das Bild mit eingebetteten Tooltips (Resultat der obigen Definitionen):

Um einen Tooltip anzuzeigen, bewegt man den Mouse-Zeiger auf eines der Fragezeichen im Bild:

Besucher

Heute: 1
Gestern: 68
Diese Woche: 192
Letzte Woche: 729
Dieser Monat: 466
Letzter Monat: 4.468
Dieses Jahr: 22.044
0254637
Deutschland 32,8% Deutschland
USA 21,7% USA
Frankreich 3,3% Frankreich
Italien 2,7% Italien
Indonesien 2,0% Indonesien
Polen 1,9% Polen

Total:

209

Länder
Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbesssern. Auf keinen Fall werden persönliche oder vertrauliche Daten gespeichert oder weitergegeben.