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:
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 |  |
|
| Apple Mail 2.1.3 | |
|
| Microsoft Outlook Express 6 | |
|
| GMX | |
|
| Yahoo | |
|
| Freenet | |
|
| Hotmail | |
|
| AOL | |
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.
Am 5. April 2008 um 11:19 Uhr
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
Am 6. April 2008 um 21:43 Uhr
na, das nenne ich Kundenservice und eine gute Erklärung.
Danke!
Am 7. April 2008 um 09:03 Uhr
Einen weiteren Test zu dem Thema haben die Kollegen von CampaignMonitor gemacht. Dort steht man Image Maps kritischer gegenüber. Urteilt selbst:
http://www.campaignmonitor.com/blog/archives/2007/11/do_image_maps_work_in_html_ema.html
Am 28. Dezember 2009 um 15:12 Uhr
Wie sieht es mit Googelmail und Web.de aus?