Image Maps


December 02, 2011 at 08:51
HTML

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>

Hinterlasse einen Kommentar: