Image Maps

Man benutzt Image Maps eigentlich eh selten… wenn ich Teile von Bildern verlinken will, dann leg ich einen Link drüber mit position:absolut und display:block, wenns für IE funktionieren soll ggf. noch mit einem transparenten PNG … das ist weit praktischer, denn so kann ich mir erstmal anschauen, wo der Link drüberliegt, indem ich ihm ein border:1px solid #00FF00 oder so gebe.

Aber für einen Newsletter brauchte ich eine Image Map und hatte wirklich keine Lust, ewig rumzuprobieren bis die Positionen der rectangles passen. Also habe ich gesucht und bin auf das Image Map Tool gestoßen. Man lädt ein Bild hoch und kann sich dann bequem seine Rectangles einfügen, an die richtige Stelle setzen, die Größe anpassen und den Link setzen. Am Ende kriegt man den fertigen HTML Code. Man kann sogar alte maps importieren und weiterbearbeiten.

Großartiges, nützliches Tool!

<img usemap="#map2" src="newsletter.jpg" alt="" />
<map name="map2">
 <area shape="rect" coords="56,42,299,460" href="http://www.link1.at" />
 <area shape="rect" coords="335,44,569,460" href="http://www.link2.at" />
</map>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.