Sammelthread für Tutoriale und Codehilfen

[img]http://i39.tinypic.com/15ogn4j.jpg[/img]

In diesem Tutorial möchte ich euch anhand einer Beispielgrafik erklären, was Imagemaps sind und wie sie zu gebrauchen sind.

Foto entfernt, da zwischenzeitlich wohl ausgetauscht(Freehoster) -> zweifelhaftes Foto

Ich möchte die hier vorliegenden drei Buttons, die aus einer einzigen Grafik bestehen, verlinken. Wie ich das machen kann, ohne die Grafik dreiteilen zu müssen? Imagemap heißt das Stichwort.

So sieht das Markup einer Imagemap in meinem Falle aus:


Das src-Attribut (src ~> source) des Bildes gibt den Dateipfad zum Bild "http://i43.tinypic.com/k4grk9.jpg" an. Das usemap-Attribut sagt dem Browser, auf welches map-Element er sich zu beziehen hat. border="0" bedeutet lediglich, dass der übliche blauen Rahmen unterdrückt wird.

Die area-Elemente definieren die Bereiche im Bild und binden sie an bestimmte Internetadressen (hier der Einfachheit halber mit # angedeutet). Dabei gibt das shape-Attribut in drei Auführungen, welche die geometrische Form des Bereiches angeben; das coords-Attribut gibt die Pixelkoordinaten entsprechend der gewählten Form an.

• rect: linksoben-x, linksoben-y, rechtsunten-x, rechtsunten-y
• circle: Zentrum-x, Zentrum-y, Radius
• poly: x1,y1, x2,y2, ... xn,yn

Der Ursprung liegt dabei immer im linken, oberen Pixel des Bildes mit x=0 und y=0, wobei x dann nach rechts und y nach unten immer größer werden. Die meisten Bildbearbeitungsprogramme können die Pixel-Koordinaten von jedem beliebigen Bildpunkt angeben.

Ach ja, wichtig: Das alt-Attribut im area-Element stattet den Link mit einer Textkennzeichnung aus. Ohne diese Kennzeichnung bliebe die Imagemap unzugänglich für alle, die das Bild nicht sehen können. Von daher ist das alt-Attribut hier Pflicht!


Viel Spaß bei eurem nächsten Projekt - vielleicht beinhaltet es ja sogar eine Imagemap, jetzt, wo ihr einiges darüber gehört habt.