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!
Wobei ich mir die Frage stelle, warum Browser das nicht schon seit 1999 können. Immerhin waren Imagemaps damals richtig hip.
Hi,
erstmal vielen Dank für den Artikel! Konnte mein Problem zwar noch nicht lösen, aber ich weiss schon mal, dass es geht, das ist doch schon was!
Ich will bei einem aktuellen Projekt genau dasselbe machen wie Du oben gemacht hast, eine runde area klickbar machen…auch in IE6 (IE7 tuts…), IE6 reagiert überhaupt nicht…
jetzt konnte ich nicht ganz folgen wie das mit dem Speichern in einer variable und dann Einfügen per innerHTML usw. geht, wird die map oben mit dem wikipedia-globe schon auf diese Weise eingebunden (ich denke ja oder, in IE6 tut sie nämlich was sie sollte =D)…konnte jedoch den code den Du benutzt hast nicht finden, deshalb wollte ich fragen, ob das auch mit jQuery möglich wäre…bin nicht wirklich JavaScript Profi und jQuery ist so einfach, das raff ich grad noch knapp =P…aber so reines JavaScript, da bin ich ziemlich verloren^^…
Gruss und Danke für eine Antwort!
LuK
jQuery vereinfacht nur den Zugriff auf verschiedene JavaScript-Funktionen. Mit anderen Worten: Ja, natürlich geht das auch, wenn du jQuery, Prototype oder eine beliebige andere JavaScript-Bibliothek einsetzt. (Ich hab bei dem konkreten Beispiel auch jQuery eingesetzt.)
Ist etwas frech ich weiss, aber hättest Du mir den Code dafür? Gruss & Danke
Hi,
ich bin’s nochmal, hab so einiges ausprobiert um das hinzukriegen…
$(document).ready( function() {
$(”)
.append(”)
.prependTo(‘#airplay’);
});
wenn ich mich nicht täusche, ist das das, was auch bei Dir nich funktioniert hat, in normalen Browsern (FF, Chrome, Safari, Opera) funktionert das auch…aber die IE’s kreigen das einfach nicht hin…ich hab dann das mit dem HTML in einer Variable speichern und so einfügen versucht:
var webradio = ”
$(webradio).prependTo(‘#webradio’);
es funktioniert zwar insofern besser, als dass der Icon im IE wenigstens angezeigt wird (was beim vorherigen Beispiel nicht der Fall war), aber klickbar ist er immer noch nicht –> Hier der Link zu Entwicklungsseite: http://cfm.031.be/ (nicht lachen, die farbigen Hintergründe sind nur zur orientierung wo welcher Bereich ist =D) –> es geht um den roten Play Button oben rechts…
ich verzweifle noch ab diesem IE^^, danke für jede Hilfe!
LuK
Sorry für den letzten Post, das mit dem Code anzeigen klappt nicht so wie ich es wollte =)…den letzten nur löschen (vorausgesetzt bei diesem klappts)…
ich bin’s nochmal, hab so einiges ausprobiert um das hinzukriegen…
$(document).ready( function() {
$('<img id="webradio-img" class="png" usemap="#webradio-imgmap" src="./layout-gfx/icons/webradio-play-off.png" alt="Webradio" />')
.append('<map id="webradio-imgmap" name="webradio-imgmap"><area shape="circle" alt="Webradio" coords="79,80,68" href="#" /></map>')
.prependTo('#webradio');
});
wenn ich mich nicht täusche, ist das das, was auch bei Dir nich funktioniert hat, in normalen Browsern (FF, Chrome, Safari, Opera) funktionert das auch…aber die IE’s kreigen das einfach nicht hin…ich hab dann das mit dem HTML in einer Variable speichern und so einfügen versucht:
$(document).ready( function() {
var webradio = '<img id="webradio-img" class="png" usemap="#webradio-imgmap" src="./layout-gfx/icons/webradio-play-off.png" alt="Webradio" /><map id="webradio-imgmap" name="webradio-imgmap"><area shape="circle" alt="Webradio" coords="79,80,68" href="#" /></map>'
$(webradio).prependTo('#webradio');
});
es funktioniert zwar insofern besser, als dass der Icon im IE wenigstens angezeigt wird (was beim vorherigen Beispiel nicht der Fall war), aber klickbar ist er immer noch nicht –> Hier der Link zu Entwicklungsseite: http://cfm.031.be/ (nicht lachen, die farbigen Hintergründe sind nur zur orientierung wo welcher Bereich ist =D) –> es geht um den roten Play Button oben rechts…
ich verzweifle noch ab diesem IE^^, danke für jede Hilfe!
LuK
Hab’s auch noch per .html()-Funktion versucht:
$('#webradio').html(webradio);aber da tut sich auch nichts…das Ding will und will einfach nicht klickbar werden =/
Fehlender Semicolon nach der Variable hab ich auch korrigiert…hat nichts gebracht [weder mit prependTo() noch mit html()]…sorry wegen dem gespamme hier…kannst ja ev. alle Kommentar ein einen zusammenkopieren (wenn das geht…)
OK…ich habs (so halb)…bin darauf http://www.tutorialspoint.com/javascript/javascript_image_map.htm gestossen und dort geht das ganze auch im IE 6 ohne irgendwelchen JS Zusatz, das hat mich ins Grübeln gebracht, hab meine Imagemap genau nach dem code auf dieser Seite angepasst, dann gings immer noch nicht, habe geschaut was die für ein Bildformat benutzen –> GIF…ich benutzte PNG + DD_belated PNG fix (wegen IE6 natürlich…), habe jetzt das Bild gegen ein GIF ausgetauscht und voila, es tut ohne JS-Hilfe auch im IE6, bin noch nicht zufrieden mit dem optischen Teil und versuchs ev. noch mit 8bit PNG über Fireworks (das Ding kreigt irgendwie Alphatransparenz bei PNG 8 hin…)
da ich aber schon so viel Zeit für dieses JS verbraucht habe, würde mich trotzdem noch interessieren, wie Du das genau gemacht hast…bzw. es wäre noch interessant zu wissen ob es bei Dir mit einem .gif auch ohne JS gehen würde (sprich, ersetze mal dein JPG gegen ein GIF und schau was passiert =D)…
Ich verwende in dem Beispiel eine PNG-Datei, keine Ahnung, ob das einen Unterschied macht (ich glaube nicht). Ich verstehe nicht ganz, warum du unbedingt jQuery verwenden musst. Verwend doch einfach innerHTML, anstatt die jQuery-Methoden. Vielleicht funktionierts dann! (Wer weiß, was jQuery im Hintergrund macht, ob es überhaupt noch innerHTML verwendet?)
Warum nicht einfach so:
$('#webradio')[0].innerHTML = webradio;(Zur Info: Die $-Funktion gibt in jQuery einen Array mit Elementen zurück. Die jQuery-Methoden kann man auf den gesamten Array anwenden, die JavaScript-eigenen Funktionen nicht. Deshalb das [0].)
Hm, dazu fehlen mir eben die Skills…bin leider erst gerade dabei die Hintergründe hinter jQuery zu verstehen (also pures JavaScript), hat mich immer abgeschreckt und erst mit der Vereinfachung durch jQuery hab ich mich da rangewagt, somit hab ich ziemlich banausenmässig einfach nur jQuery gelernt und dadurch eben kaum eine Ahnung von purem JavaScript…=/
dürfen denn (wie Du das oben gemacht hast) jQuery Selektoren mit purem JavaScript gemischt werden?? jQuery hat eben etwas mühe mit innerHTML (entspricht meines Wissens der .html() funtion…aber die parst das ganze im IE extrem hässlich mit GROSSEN-tags, keinen Zeilenumbrüchen und auch sonst noch so einigen Unsauberheiten.
Das Problem war nicht die PNG Datei an sich, sondern dass ich (um sie korrekt anzuzeigen) im IE6 den DD_belated PNG Fix verwende und das Javascript dieses Fixes macht irgendwas (Sandwichen des PNGs oder so) mit dem Bild, so dass dann andere Javascripts wie das was ich oben wollte nicht mehr greifen…also soweit ist das meine Vermutung…
Der Wikipedia-Globe oben ist aber eine JPG Datei?!
Das oben ist nur ein Beispiel und wird nicht mit JavaScript generiert. (Das Projekt, bei dem dieser Fehler aufgetaucht ist, hat auf einer PNG-Datei basiert.)
Ich schlage vor, dass du versuchst, in JavaScript-Basics sicherer zu werden, bevor du dich komplexeren Themen bzw. Browser-Bugs annimmst. :)
Bin dabei =)…auf der anderen Seite hab ich keine Zeit “nur” JavaScript zu lernen…muss ein Projekt fertig kriegen (war eigentlich mal nur der grafische Designer und jetzt muss ich alles machen…^^)
Vielen Dank für den Hinweis. Ich nutze die jQuery Tools scrollable und konnte Imagemaps nur mit dem Hinweis auf innerHTML zum laufen bringen!