Kommentare zu: IE6&7 vs. JavaScript-generierte Image-Maps

Von: Felix Nagel

Felix Nagel — Mon, 13 Dec 2010 13:48:23 +0000

Vielen Dank für den Hinweis. Ich nutze die jQuery Tools scrollable und konnte Imagemaps nur mit dem Hinweis auf innerHTML zum laufen bringen!

Von: LuK

LuK — Fri, 18 Sep 2009 19:53:36 +0000

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…^^)

Von: Sebastian Moser

Sebastian Moser — Fri, 18 Sep 2009 12:56:04 +0000

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. :)

Von: LuK

LuK — Fri, 18 Sep 2009 10:32:09 +0000

Der Wikipedia-Globe oben ist aber eine JPG Datei?!

Von: LuK

LuK — Fri, 18 Sep 2009 10:23:23 +0000

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…

Von: Sebastian Moser

Sebastian Moser — Thu, 17 Sep 2009 15:44:01 +0000

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].)

Von: LuK

LuK — Tue, 15 Sep 2009 17:49:59 +0000

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)…

Von: LuK

LuK — Tue, 15 Sep 2009 17:13:16 +0000

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…)

Von: LuK

LuK — Tue, 15 Sep 2009 17:05:56 +0000

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 =/

Von: LuK

LuK — Tue, 15 Sep 2009 16:30:20 +0000

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() {
		$('')
		.append('')
		.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 = ''
		$(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