[CSS] Image Maps ✤✤✤

Ich hatte ja zwei Tutorials bezüglich ImageMaps geschrieben gehabt, weil die beiden aber irgendwie ein ganzes bilden, wollte ich sie zusammenfassen.
Für alle diejenigen, die jetzt allerdsing nur am hover interessiert sind, hab ich hier einen kleinen Sprunglink für euch, der euch direkt zum Anfang des Hovers bring: Sprunglink

Ich hab sowas früher 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. Und ja, ich hab mich in diese Dinger verliebt! Die Version ohne Hover läuft übrigens mit so gut wie reinem HTML, während beim zweiten eigentlich alles CSS ist.
Oh und ein DEMO gibt es natürlich auch :)

Ohne Hover
Der Code:

<img src='BILDLINK' width='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. In Zeile 1 kommt bei BILDLINK der Link zu eurem Bild in Zeilen 3-5 ersetzt ihr die Links durch die Seiten die ihr mithilfe der ImageMap erreichen wollt. xy in Zeile 1 stehen für die Abmessungen in Pixel eures Bildes. Um die geht es nämlich in Zeile 3-5.
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 damals gestellt. So hab ich es zuerst gemacht. Doch seit dem Post von Mara wusste ich, dass die Erstellung des ImageMaps auch ganz einfach mit Gimp geht. Also kein langes Zusammentragen der Koordinaten, sondern definitiv eine schnellere Variante.
Und wie die geht, folgt nun zusammen mit dem ganzen Ablauf, der Erstellung (die nur gestreift wird) bis hin zur Platzierung im Web.

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 diesen Code kopiert habt, könnt ihr ihn aber noch nicht verwenden. Gimp hat euch nach dem src nämlich keinen Link gegeben.
Ihr müsst das Bild zuerst hochladen und dann den Link platzieren. Und dann ist es soweit und ihr könnt die Map hochladen. (Bei Blogger natürlich im HTML-Gadget ^^)





Mit Hover
Okay. Jetzt geht es um einen hover-Effekt in einem ImageMap, was bedeutet, dass sich der Linkbereich beim Drüberfahren mit der Maus verändern soll. Die Frage hat mir Lina gestellt und weil ich keine Ahnung hatte, hab ich das Netz durchforstet und schlussendlich eine Lösung gefunden.
Ich habe ein Ergebnis gefunden bei dem es mit nur einen Bild geht, da mir das allerdings zu viel Definition ist, hab ich beschlossen die hover-bilder einzeln zu speichern. Und falls wer nachlesen will, wie's mit nur einem Bild geht, kann er mal hier gucken.

Okay, wie gehen wir vor?
Als erstes gestalten wir das Bild für die ImageMap und zeitgleich auch die HoverBilder. Ausserdem brauchen wir wieder die Abstände von oben und links. Anstelle der Koordinaten wird hier allerdings jeder Linkbereich in Höhe und Breite sowie Abstand von oben und links definiert.
Okay, so schaut mein Bild aus:

Wie ihr sehen könnt, sind das drei Links. Diese definiere ich nun in einer Linkliste, iklusive id, damit wir das ganze CSSen können ^^

<ul id="imagemap"> 
<li id="hover1"><a href="http://www.blogger.com/LINK">Hover Upon Me </a>
</li> <li id="hover2"> <a href="http://www.blogger.com/LINK">Some kind of Link</a>
</li> <li id="hover3"> <a href="http://www.blogger.com/LINK">Click me!</a></li> 
</ul>

Okay. Wenn wir uns das jetzt ansehen, ist das nichts weiter als eine Linkliste. Und das ist schon das ganze HTML. Kaum zu fassen, oder? Die ganze Map entsteht durch CSS. Wir beginnen damit, das Bild zu definieren:

#imagemap {  
position: relative;  
width: 600px;  
height: 400px;  
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14CsSgDRexli_V8BMB1N4B5ppylOnJ8L7htNtBlSKntvY1xjFa2GqGTQmz18D-rAtkmiL_N-ZpxOUA2CSmXozQtBOnfCbbJRJNxWDxtcYx59FWAPZBkpY3exjt_9iD3piPZTcqRmQquA4/s1600/ImageMap.png) no-repeat;  padding: 0;  
}

Als nächstes müssen wir das Styling der Liste entfernen und die Links stylen.

#imagemap li {  
display: block;  
position: absolute;  
list-style: none;  
margin: 0;  
padding: 0;  
}   

#imagemap a {  
display: block;  
text-indent: -9999px;  
text-decoration: none;  
outline: none; 
}

Okay. Und jetzt geht es schon and die Links. Zu Beginn die Definition der Position:

#hover1 { 
left:90px; 
top:134px; 
}  

#hover2 { 
left:86px; 
top:78px; 
}  

#hover3 { 
left:303px; 
top:162px; 
}

Als nächstes müssen wir den Linkbereich definieren. Dafür geben wir zu jedem hover Höhe und Breite an:

#hover1 a { 
width:208px; 
height:197px; 
}  

#hover2 a { 
width:269px; 
height:64px; 
}  

#hover3 a { 
width:272px; 
height:237px; 
}

Und zum Schluss jetzt noch den hover-Effekt, beim Hover soll unser Hoverbild als Hintergrund des Linkbereichs funktionieren.

#hover1 a:hover{ 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSpHLdi6i9WBIS6FMDQQOigY0Ft1bmpfA5uqxIwCBCS_7AtWyNcIc-FoOWSokhiYRxwDBahDdZfXkM3OkzYPhISQVowfexlCZ53R2GpNMJCzrmmc-A_fbyazlSSy4-j8HPt8Rq159CFSQ/s1600/Hover+1+208_197.png); 
}  

#hover2 a:hover{ 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUZ4k0wgxpYUiicDcq265BKAuR2ebrhdFDeA4Wu2oLRqYr8LsEM630TXFqm5L_JId42gVQO86xjEnV1QSyOttyWNIE7kbu2tPwmu7SRVYFfAoaeYUvo3JHz_XTzoxsW63HbdXPW85WE9X3/s1600/Hover+2+269_64.png); 
}  

#hover3 a:hover{ 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI3nHPCRscxQlgMmZKaYP7NoPB87KOGdeW07oSYFSf5enntXUj5peoJjkqg898bXIgRb33poUStC1Tq2i9zzyVZdfN6IMiq1pXNQxlnMI5UmAhvalJNfuIJVzEoQ9e9qgZsMFV3wYKG4ov/s1600/Hover+3+272_237.png); 
}

Ja, das ist alles. :D
Und hier nocheinmal den allgemeinen Code, in der Schlussansicht:

<!--HTML--> 
<ul id="imagemap"> 
<li id="hover1"> <a href="LINK">Hover Upon Me </a></li> 
<li id="hover2"> <a href="LINK">Some kind of Link</a></li> 
<li id="hover3"> <a href="LINK">Click me!</a></li> 
</ul>

/*CSS ------------*/ 
#imagemap { 
position: relative; 
width: BREITE in px; 
height: HÖHE in px; 
background: url(BILDLINK) no-repeat; 
padding: 0; 
}  

#imagemap li { 
display: block; 
position: absolute; 
list-style: none; 
margin: 0; 
padding: 0; 
}  

#imagemap a { 
display: block; 
text-decoration: none; 
outline: none; 
cursor: default; 
}    

#hover1 { 
left:xy; 
top:xy; 
}  

#hover2 { 
left:xy; 
top:xy; 
}  

#hover3 { 
left:xy; 
top:xy; 
}  

#hover1 a { 
width:xy; 
height:xy; 
}  

#hover2 a { 
width:xy; 
height:xy; 
}  

#hover3 a {
width:xy; 
height:xy; 
}  

#hover1 a:hover{ 
background: url(HOVERLINK); 
}  

#hover2 a:hover{ 
background: url(HOVERLINK); 
}  

#hover3 a:hover{ 
background: url(HOVERLINK); 
}

So, und das ist er, der ganze Riesenpost über Image Maps :D