ImageMaps - Mehrere Links in einem Bild ♥♥

Halli Hallo alle miteinander.
Ich bin Myri ausm KreaTief und werde euch heute ein bisschen etwas über ImageMaps erzählen. Also ein Bild in dem mehrere Links integriert sind.
Ein Beispiel wäre mein KreaTief-Header, in dem die ganze Navigation steckt. Unten ein Bildchen davon. =)



In diesem Tutorial erzähl ich euch, wie man das ImageMap allgemein erstellt, dann wie das ganze auch einfacher in Gimp geht und zum Schluss noch, wie ihr das Bild als Header einbinden könnt.
Also: Image Maps.
Ich hab sowas schon mehr als einmal probiert und dabei versucht Bilder zu bauen und die dann irgendwie zusammenzusetzen... was im Chaos und Nichts endete.
Doch bei der Lektüre eines Buches über den ganzen HTML, CSS, Webdesign etc.-Kram, ist mir etwas ins Auge gesprungen, was genau dem entsprach, was ich suchte.

Ein Bild welches zu verschiedenen Links führt, im 'Fachjargon' als »ImageMap« bezeichnet.

Der Code:
<img src='BILDLINK' widt='xy' height='xy' border ='0' usemap=#name_der_imagemap'>
<map name='name_der_imagemap'>
<area shape='rect' cords='40.50.130.120' href='Link1'>
<area shape='rect' cords='20.15.60.35' href='Link2'>
<area shape='rect' cords='7.50.45.100' href='Link3'>
</map>

Okay, sieht auf den ersten Blick ziemlich abschreckend aus, ist es aber nicht.
Die gelben Markierungen stehen anstelle der Links, die ihr verwendet. Zu Beginn der Link zu eurem Bild, dann jeweils die Links für das Bild. Grün hinterlegt die Abmessungen eures Bildes in Pixel. Um die geht es nämlich im roten Text.
Wie ihr sehen könnt, stehen da jeweils vier Zahlen mit Punkten, vor jedem Link. Das sind die Koordinaten des Bereichs des Bilder, hinter dem euer Link steckt. Voraussichtlich für die "Klicker" irgendwie markiert, doch eigentlich unsichtbar.
Aber wie kommt man auf diese Koordinaten?
Erinnert ihr euch an die Koordinatensysteme in der Schule? P(x,y)? Genau darum geht es.
Euer Bild stellt das Koordinatensystem dar und die Ziffern jeweils den ersten Punkt des anklickbaren Rechtecks oben links. Die hinteren beiden Zahlen die x- und y-Werte des Endmarkierungspunktes unten rechts.
Folgend grafisch einmal dargestellt:

Okay. Hier eine vergrösserte Version eines Bildes mit der Auflösung 9x8px, dessen Linkbereich zwischen den Punkten P(1;7) und P(4;5) liegen.
Wie ihr sehen könnt, habe ich zwei weitere Rechtecke hinzugefügt inklusive rote Zahlen. Diese Zahlen sind diejenigen, die ihr in den Code schreiben müsst, da man immer von oben und dem linken Rand aus beschreibt. Zu Beginn also die Beschreibung von P(1;7) indem man zuerst die x-Achse dann die y-Achse betrachtet. Also 1.1. Die ersten beiden Buchstaben eingefügt!
Nun zum unteren Punkt. P(4;5). Beschrieben mit 4.3. Und das war's schon!

Und so sähe dann der Code aus:
<img src='http://bliblablubb.com/iwasanderes/Bild.png' widt='9' height='8' border ='0' usemap=#Beispiel'>
<map name='Beispiel'>
<area shape='rect' cords='1.1.4.3' href='http://dawillichhin.com/Linkbereich.htm'>
</map>

»Warum einfach, wenn's auch kompliziert geht?« Unter diesen Titel habe ich dieses Tutorial gestellt. So hab ich es gemacht. Doch die Erstellung des ImageMaps geht auch ganz einfach mit Gimp. Also kein langes Zusammentragen der Koordinaten, sondern definitiv eine schnellere Variante. =)
Und wie die geht, folgt nun.

Okay, beginnt damit, dass ihr ein neues Bild in Gimp startet und fangt an die ImageMap zu bauen. (Ich muss hier einfach mal noch den Link der Person lassen, die die besten Scrapbook-Ressourcen überhaupt hat. Bie diesem Stil hab ich diese HeaderNavi schon einige Male gesehen und darum wollt ich meinen eigenen^^)

Sobald das Bild fertig ist, geht auf Filters<Web<Image Map


Ein PopUp öffnet sich. Ihr klickt das Rechteck auf der Linken Seite an und umrahmt damit den ersten Link. Ein Fenster öffnet sich. Wählt oben bei den Tabs "Link" Geht unten auf "WebSite" (sollte eigentlich automatisch so rauskommen) und gebt unten den Link ein, zu dem dieser Bereich führen soll.

Das wiederholt ihr solange, bis ihr alle Stellen mit Linkbereichen versehen habt und dann geht ihr auf View<Source und der Code erscheint. Diesen kopiert ihr.

Wenn ihr eure ImageMap an einer relativ einfachen Stelle haben wollt, beispielsweise unter dem Header als Navigationsleiste, dann fügt ihr den Code einfach in ein HTML-Gadget ein und platziert es unterhalb des Headers.
Soll die ImageMap allerdings den ganzen Header ersetzen, müssen noch zwei Schritte mehr gemacht werden.
Die ImageMap muss oberhalb des Headers platziert werden, was für gewöhnlich nicht geht, also muss der Code verändert werden. Ausserdem muss das Headerbild verschwinden.
Zuerst das "Verschwinden" des Headers. Die einfachste Lösung ist das Ersetzen des Bildes durch ein 1x1px grosses, transparentes Bild, welches "anstelle Titel und Beschreibung" hochgeladen wird.
Das mit dem "über den Header platzieren" wird im HTML gemacht.
Also einfach dorthin wechseln und folgendes suchen:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='Header1' locked='true' title='Be KreaTief (Header)' type='Header'/>
</b:section>
</div>

Und dann folgende Änderungen vornehmen:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Vorlage Speichern und dann zu den Seitenelementen wechseln.
Nun seht ihr, dass ihr auch oberhalb des Headers Gadgets hinzufügen könnt. Und da kommt dann das HTML-Gadget mit dem Code rein. (Ob selbstberechnet (yeah! Myri ist dann stolz auf euch ^^) oder mit Gimp, macht keinen Unterschied ;D)

Und das war's dann auch schon. Ich hoffe es hilft vielleicht jemandem von euch. =)

Version ohne GIMP findet ihr hier.

Nachtrag:
Da der Header nicht mehr auf meiner Page sichtbar ist, habe ich ein DEMO gebaut.
Ausserdem habe ich für all diejenigen unter euch, die gerne eine ImageMap mit Hover-Effekt hätten, noch einen Link zu meinem Tutorial dazu. :)