<area> Tag - Bildteile verlinken mit einer Imagemap

Erstellt eine Image-Map zum Verlinken von Bildteilen:

<img src="wellis.jpg" width="500" height="281" alt="Wellis"
usemap="#imgmap">   
<map id="imgmap" name="imgmap">
  <area shape="rect" alt="" title="" coords="7,6,144,162" href="https://ekiwi.de" target="_blank" />
  <area shape="circle" alt="" title="" coords="253,136,56" href="https://andydunkel.net" target="" />
  <area shape="poly" alt="" title="" coords="330,134,491,254,336,268,302,186" href="https://ekiwi-blog.de" target="_blank" />
</map>   

Online testen

Verwendung

Mit einer Imagemap können Sie Bildteile einzeln verlinken. Jedes anklickbare Element ist in einem area Tag zusammengefasst. Dieser enthält den Typ (rect = rechteckig, circle = Kreis oder poly = Polygon). Die area Tags werden in einem map Tag eingebettet. Die Map hat einen Namen, welchen man mit usemap dem Bild als Attribut zuweist.

Jedem Linkziel können wie beim a Tag verlinkt werden, d.h. href = URL, target = Zielframe, title = Titel des Links, alt = Alternativtext.

Darstellung

Wellis

Erstellung mit Online Tools

Die Erstellung der Koordinaten und Wegpunkte von Hand ist schwierig, daher empfiehlt sich die Verwendung eines Online-Tools wie:

Online Image Map Editor (http://www.maschek.hu/imagemap/index)