Ohne Verlinkungen würde es das Internet wir wir es kennen ja gar nicht geben, deswegen lebt es von Links in allen möglichen Variationen. Reine Textlinks sind schon lange nicht mehr das einzige – Ob Bilder, Div’s oder ähnliches, alles kann man mit Links ausstatten. Aber was ist nun, wenn man ein größeres Bild hat, und Teile auf diesem verlinken will? Mit Photoshop das Bild slicen und die makierten Stellen dann verlinken ist nicht nur umständlich und bei einer Änderung sehr aufwendig, es wirkt zudem noch sehr unprofessionell und der Server braucht länger, um alle einzelnen Bildteile auszugeben. Die Lösung ist eine so genannte Image-Map!

Als Beispiel nehme ich mal die Grafik von mir, welche ihr rechts seht. Diese ist als kleine Übersicht dazu geeignet die einzelnen Zahlungsarten für eine Bestellung auszugeben. Wie man leicht sieht, ist diese in verschiedene Abschnitte geteilt, sodass man nachher “PayPal”, “Sofortüberweisung”, “Vorauskasse” etc. auswählen kann. Wie oben schon beschrieben gibt es da den Trick namens “Image-Map” um unsere Idee umzusetzen. Folgender Grundcode liegt dabei zugrunde:

1
2
3
4

<img src="bild.jpg" usemap="#itrunde"  id="itrunde" width="350" height="473" alt="" />
<map id="_itrunde">
<area shape="rect" coords="274,142,293,159" target="_blank" href="/dateien/it-runde.pdf" alt="" title="" />
</map>

Eigentlich ganz simpel aufgebaut, das einzige was immer etwas kniffelig ist, sind die Koordinaten. Diese kann man sogar mit Paint ermitteln, doch meist möchte man sehen, welche Bereiche man schon genutzt hat. Deshalb nehme ich persönlich mir immer einen Generator zur Hand, damit geht es schnell und noch unkomplizierter ;).

Online Generator

Mein persönlicher Favorit ist hierbei der Online Image Map Editor von Machek. Einfach Bild hochladen oder die URL des hochgeladenen Bildes eingeben und schon kann man verschiedene Teile/Areas des Bildes verlinken. Genial finde ich dabei auch runde oder eckige Areas auswählen zu können – Gut gemacht!. Ein weiterer Pluspunkt ist die sofortige Benennung der einzelnen Bereiche und der dazugehörigen target (Also ob man die Bilder im selben Frame, im neuen Fenster o.ä. öffnen möchte).

Ist man mit dem Makieren fertig, kann man sich über den HTML-Button sofort den fertigen Quelltext ausgeben lassen oder sich erstmal die entgültige Ausgabe anzeigen lassen. Beim ausgegebenen Quelltext müsst ihr übrigens noch wie im oberen manuellen Beispiel von mir das img-Tag einfügen, sonst klappt die ganze Sache natürlich nicht :D.

Viel Spaß beim ausprobieren! 😉

Tweet