Image Map
Die Image Map erstellt auf einem Bild sensible Areale, deren Flächen als Links genutzt werden. Es gibt rechteckige Flächen, Kreise und Polygone.
Sensitive Grafik
<map name="myMap" id="map"> <area />
Das map-Tag umschliesst die folgenden Areale. Es kann beliebig am Seitenanfang oder -schluss notiert werden, es hat ein Attribut name="myMap", welcher im Ankerbild referenziert wird.
Mehrere Areale können in beliebiger Reihenfoge notiert werden, das area-Tag gibt einen Bereich als Form und als Koordinaten in Pixeln an.
Zur Verfügung stehen shape="rect" (Rechteck), shape="circle" (Kreis), und shape="poly" (Polygon).
Der Link wird gleich wie im a-Tag beschrieben, das alt-Attribut ist wie in einem Bild obligatorisch und das title-Attribut ist zu empfehlen.
coords="..."
Das Attribut für die Koordinaten 'coords' hat je nach Form unterschiedlich viele durch Kommas getrennte Werte:
Rechteck: Ecke links oben Pixel von links, Pixel von oben, Ecke rechts unten Pixel von links, Pixel von oben (elo-l, elo-o, eru-l,eru-o).
Kreis: Mitte Pixel von links, Pixel von oben, Radius in Pixel (m-l, m-o, r).
Polygon: Punkt 1 Pixel von links, Pixel von oben, Punkt 2 Pixel von links, Pixel von oben, Punkt 3 Pixel von links, Pixel von oben, (1-l, 1-o, 2-l, 2-o, 3-l, 3-o).
<img usemap="#myMap"> <area />
Die Grafik, die sensibilisiert werden soll, wird ganz normal mit dem img-Tags referenziert. Zusätzlich erhält es das Attribut usemap="#myMap", womit es einer benannten Map zugeordnet wird:
<img src="images/cloe.jpg" width="400px" height="600px" border="0" alt="Sensitive Grafik" usemap="#myMap" />
Die image Map sieht dann so aus:
<map name="myMap" id="map">
<area shape="rect" coords="0,0,50,600"
href="#" alt="Bereich 1" title="Rechteck entlang der linken Kante, führt niergends wohin." />
<area shape="circle" coords="300,400,60"
href="links_test.html" alt="Bereich 2" title="Sensibler, kreisförmiger Bereich, teste den Link" />
<area shape="poly" coords="96,152,225,115,194,264"
href="bild_inseite.html" target="_blank" alt="Bereich 3"
title="Das sensorische Dreieck liegt zwischen den Augen und dem Mund." />
</map>
Check den Code.