Sebastian's Suppe

Image Maps sind ein nützliches HTML-Feature, mit der man, anstatt ein ganzes Bild zu verlinken, nur einen kleinen Ausschnitt davon verlinkt. Das macht zum Beispiel Sinn, wenn man eine Logo-Grafik hat, aber nur die Umrisse des Logos anklickbar machen will.

Das klickt sich zum Beispiel beim Wikipedia-Logo so: (Versuch, das Logo in der Mitte und den weißen Rand rundherum anzuklicken.)

Der Code dafür sieht so aus:

<img src="$wikipedia_thumb[1].jpg" alt="" usemap="#wikipediatestmap" />
<map name="wikipediatestmap">
<area href="JavaScript:alert('Angeklickt!');" shape="circle" coords="100,92,98" />
</map>

Das coole an Image Maps ist aber, dass man auf einem Bild gleich mehrere solcher anklickbaren Gebiete (<area>) definieren kann. Und genau so eine Image Map mit mehreren Klick-Bereichen hab ich bei einem Projekt via JavaScript generieren lassen.

Das Problem: Obwohl alle modernen Browser (Firefox, Opera, Safari, Chrome, Internet Explorer 8) die Image Map korrekt angezeigt haben, sind die älteren Semester Internet Explorer 6 und 7 streiken gegangen. Sie haben die Grafik angezeigt, aber nicht anklickbar gemacht (ergo: die Image Map ignoriert).

Nach mehreren Stunden zunehmend grantigerem Debugging hab ich nur durch Zufall (oder durch Mangel an vernünftigen Fehlerquellen) das Problem gefunden:

Ich habe die verschiedenen Elemente der Image Map als DOM-Objekte erzeugt (mit document.create()) und in den DOM Tree eingefügt. Die alten Internet Explorer-Versionen haben die so generierte Image Map aber einfach ignoriert. Erst, nachdem ich die Image Map durch zusammensetzen des HTML-Codes in eine JavaScript-Variable, die dann mit innerHTML in den DOM-Tree eingefügt wurde, generiert habe, wurde die Image Map auch von dem Dreckszeug namens Internet Explorer 6 akzeptiert.

Hoffentlich kann ich mit diesem Artikel irgendjemandem diese frustrierende Debugging-Session ersparen!