Image Maps in Newslettern

Seit der Spezifikation 3.2 von HTML ist es möglich, clientseitige Image Maps zu erstellen um in Grafiken sensitive Bereiche für Verweise zu definieren. Die Darstellung von Image Maps ist in allen aktuellen sowie antiquierten Browsern ohne Probleme möglich, immerhin wurde die oben genannte Spezifikation schon Anfang 1997 verabschiedet. Aber wie verhält es sich mit der Integration in Newslettern? Gibt es Probleme mit E-Mail-Clients? Und wie sieht es mit der Unterstützung seitens populärer Webmail-Anbieter aus? Dieser Artikel liefert ein paar Antworten auf diese Fragen.

Warum überhaupt Image Maps?

Heutzutage gibt es eine Vielzahl von verschiedenen E-Mail-Clients und Webmail-Anbietern, welche alle verschiedenste Einschränkungen in Bezug auf die Darstellung von HTML-E-Mails besitzen. Inbesondere die Positionierung von Elementen ist meist schwer umzusetzen, so dass sie in allen Applikationen richtig dargestellt wird. Hier können Grafiken unter Verwendung von Image Maps eine gute Alternative zu einzelnen Grafiken sein, welche eventuell auseinander gerissen werden und keinen Zusammenhang mehr bieten.

Der Test

In diesem Abschnitt soll die Darstellung von Image Maps in Newslettern in folgenden Clients getestet werden: Mozilla Thunderbird 2.0.0.12, Apple Mail 2.1.3, Microsoft Outlook Express 6, GMX, Yahoo, Freenet, Hotmail und AOL.

Für den Test wird an alle Clients die gleiche E-Mail versendet; die Grafikdatei wird extern referenziert. Das HTML-Gerüst für die E-Mail sieht wie folgt aus:

<html>
<head>
<title>Imape Map-Test</title>
</head>
<body>
<img src=“imagemap.gif“ border=“0″ usemap=“#Nachrichten“>
<map name=“Nachrichten“>
<area shape=“rect“ coords=“24,22,107,65″ href=“http://www.spiegel.de“>
<area shape=“circle“ coords=“156,86,32″ href=“http://www.stern.de“>
<area shape=“poly“ coords=“55,90,105,114,98,169,43,179,16,130″ href=“http://www.focus.de“>
</map>
</body>
</html>

Mit Hilfe des map-Tags wird die Image Map namens Nachrichten angelegt und im usemap-Attribut des Bildes referenziert. Die einzelnen sensitiven Bereiche der Map werden mit dem area-Tag definiert. Die Grafik, welche der Image Map zugrunde liegt, ist wie folgt aufgebaut:

imagemap.gif

Es gibt drei geometrische Formen, die innerhalb einer Image Map definiert werden können: Viereck, Kreis und Polygon. Bei dem Viereck definiert man die X/Y-Positionen der oberen linken und unteren rechten Ecke. Der Kreis wird mit Hilfe eines Mittelpunkts und dem gewünschten Radius eingefügt. Das Polygon wird durch eine beliebige Anzahl von nacheinander folgenden X/Y-Koordinaten umrissen. In der Test-E-Mail verweisen die drei Formen auf die Online-Angebote großer Nachrichtenmagazine.

Auswertung

Alle getesteten Clients konnten ohne Probleme mit Image Maps umgehen. Nachfolgend eine kleine Übersicht:

Mozilla Thunderbird 2.0.0.12   icon_okay.gif
Apple Mail 2.1.3   icon_okay.gif
Microsoft Outlook Express 6   icon_okay.gif
GMX   icon_okay.gif
Yahoo   icon_okay.gif
Freenet   icon_okay.gif
Hotmail   icon_okay.gif
AOL   icon_okay.gif

Fazit

Image Maps sind eine sichere Alternative in Newslettern für zusammenhängende Grafiken, die sensitive Verweise enthalten sollen. Die Unterstützung für Image Maps ist, wie in der Auswertung gesehen, hervorragend.

4 Gedanken zu „Image Maps in Newslettern

  1. soophie

    mit den getesteten Clients habe ich bei der Newsletterentwicklung gute Erfahrungen gemacht, aber wie sieht es mit den Problemkindern Outlook 2007 und Lotus Notes aus? Die brechen meinem Layout immer wieder das Genick 😉

Schreibe einen Kommentar

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