HTML: Image Maps – Image Mapping
Mit JavaScript kann man viele Effekte auf seine Webseite bringen, jedoch bringt auch das eher langweilige HTML ein paar nette Sachen mit, welche einem einiges an JavaScript ersparen können. Und zwar geht es um Image Maps, also ums Mappen von Bildern. Zuerst aber eine kurze Erklärung was Image Maps überhaupt sind.
Mit Image-Maps ist es möglich, Bereiche auf einem einzigen Bild einzuteilen und z.B. eine Verlinkung auf einem bestimmten Punkt auf dem Bild hinzuzufügen. So könnte man theoretisch eine Navigation aus einem Bild erstellen und die einzelnen Links mit einem Image Mapping verlinken – aber dies wäre sehr unflexibel.
Offiziell wird Image-Map folgendermassen beschrieben:
Image maps allow authors to specify regions of an image or object and assign a specific action to each region (e.g., retrieve a document, run a program, etc.) When the region is activated by the user, the action is executed.
Um so einen Image-Map zu erstellen, wird zuerst natürlich ein Bild benötigt, welches man mappen will.
Das Bild wird dann mit per HTML eingebunden und man gibt dem Bild einen Map:
<img usemap="#map" src="bild.jpg" />
“#map” ist hierbei der Name der Map, welche wir gleich definieren werden. Dieses HTML Attribut wird benötigt damit der Map funktioniert. Für valides HTML wird noch das alt und title-Attribut benötigt.
Der Mapping Part, welcher durch den oben genannten HTML-Tag aufgerufen wird, wird in einem eigenen Teil definiert und sieht so aus:
<map name="map">
<area shape="rect" coords="11,10,59,29"href="http://www.google.ch" alt="Google CH" title="Google Schweiz" />
<area shape="circle" coords="3,15,7" href="http://www.google.de" alt="Google DE" title="Google Deutschland" />
<area shape="poly" coords="15,46,69,50,13,14" href="http://www.google.at" alt="Google AT" title="Google Österreich" />
</map>
Im img-Attribut wird also mit ‘usemap=”#map”‘ auf die Map ‘#map’ zugegriffen, welche wir (siehe Code oben) definieren.
Die Bereiche in denen was passiert (in unserem Beispiel sind es jetzt verlinkungen), werden mit Koordinaten angegeben und erhalten eine Form. Es gibt neben “default” (der restliche, undefinierte Bereich) 3 Formen fürs Mapping – rect (Viereck), circle (Kreis) und poly (Polynom). Diese werden (siehe oben) mit shape=”gewünschte form” angegeben.
Zu den verschiedenen Formen nun noch eine kurze Erklärung, wie das ganze mit den Koordinaten aussieht.
Viereck (shape=”rect”) Koordinaten werden definiert für: x1,y1,x2,y2
x1 = linke obere Ecke, Pixel von links
y1 = linke obere Ecke, Pixel von oben
x2 = rechte untere Ecke, Pixel von links
y2 = rechte untere Ecke, Pixel von oben
Kreis (shape=”circle”) Koordinaten werden definiert für: x,y,r
x = Mittelpunkt, Pixel von links
y = Mittelpunkt, Pixel von oben
r = Radius in Pixel
Polygon (shape=”poly”) Koordinaten werden definiert für: x1,y1,x2,y2 … xn,yn
x = Pixel einer Ecke von links
y = Pixel einer Ecke von oben
Es können so viele Ecken definieren wie gewünscht. Von der letzten definierten Ecke muss man sich einfach eine Linie zur ersten definierten Ecke hinzu denken, welche das Polygon schliesst.
(Quelle: Selfthtml)