<map> funktioniert im IE nicht

[André Derron]

Hallo NG

Ich füge ein Bild mit einem Map in meine Seite.
Auf IE läufts nicht, aber auf allen andern (Fox, Opera etc) einwandfrei.
Auf dem IE erscheint die Grafik, jedoch keine MAP-Funktionalität.
Woran könnte das liegen?

Besten Dank für Eure Hilfe
André

  
        var div = document.getElementById(myConst.divCboTarif);  
  
        /*----------------------------------------------------  
            Zuerst der das Bild  
        */  
        pic = document.createElement("img");  
        pic.setAttribute("id",myConst.picSeite);  
        pic.setAttribute("usemap","#mapPicSeite");  
        pic.src = r.src;  
        div.appendChild(pic);  
  
        /*-----------------------------------------------------  
            Dann das MAP  
        */  
        var m = document.createElement("map");  
        m.setAttribute("id","mapPicSeite");  
        m.setAttribute("name","mapPicSeite");  
  
        var c1 = r.left1 + "," + r.top1 + "," + r.r1  
        var a1 = document.createElement("area");  
        a1.setAttribute("id","a1")  
        a1.setAttribute("alt","Linke Zahnseite")  
        a1.setAttribute("title","Füllung zweiseitig, links");  
        a1.setAttribute("shape","circle");  
        a1.setAttribute("coords",c1)  
        a1.setAttribute("href","#")  
        a1.setAttribute("onmouseover","setSeite_Events.onMouseOver()")  
        a1.setAttribute("onmouseout","setSeite_Events.onMouseOut()")  
        a1.setAttribute("onclick","setSeite_Events.onClick('L')")  
        m.appendChild(a1);  
  
        var c2 = r.left2 + "," + r.top2 + "," + r.r2  
        var a2 = document.createElement("area");  
        a2.setAttribute("id","a2")  
        a2.setAttribute("alt","Rechte Zahnseite");  
        a1.setAttribute("title","Füllung zweiseitig, rechts");  
        a2.setAttribute("shape","circle");  
        a2.setAttribute("coords",c2)  
        a2.setAttribute("href","#")  
        a2.setAttribute("onmouseover","setSeite_Events.onMouseOver()")  
        a2.setAttribute("onmouseout","setSeite_Events.onMouseOut()")  
        a2.setAttribute("onclick","setSeite_Events.onClick('R')")  
        m.appendChild(a2);  
  
        div.appendChild(m);  

[molily]

Hallo,

pic = document.createElement("img");
        pic.setAttribute("id",myConst.picSeite);

Verzichte besser auf setAttribute zugunsten des direkten Setzens von Attributen:

pic.id = myConst.picSeite;

Das funktioniert robuster im IE.

pic.setAttribute("usemap","#mapPicSeite");

pic.useMap = "#mapPicSeite";

a1.setAttribute("onmouseover","setSeite_Events.onMouseOver()")
        a1.setAttribute("onmouseout","setSeite_Events.onMouseOut()")
        a1.setAttribute("onclick","setSeite_Events.onClick('L')")

Das wird im IE gar nicht funktionieren. Du musst hier das Schema des traditionellen Event-Handlings einhalten und eine Funktion zuweisen:

a1.onmouseover = setSeite_events.onMouseOver;  
a1.onmouseout = setSeite_events.onMouseOut;  
a1.onclick = function () {  
   setSeite_Events.onClick('L');  
};

Mathias

[MudGuard]

Hi,

pic = document.createElement("img");
        pic.setAttribute("id",myConst.picSeite);
Verzichte besser auf setAttribute zugunsten des direkten Setzens von Attributen:
pic.id = myConst.picSeite;

War da nicht auch noch was, daß der IE grundsätzlich Probleme mit dynamisch erzeugten name/id-Attributen hatte?
Und man das stattdessen schon beim createElement angeben muß ...

cu,
Andreas

[molily]

War da nicht auch noch was, daß der IE grundsätzlich Probleme mit dynamisch erzeugten name/id-Attributen hatte?
Und man das stattdessen schon beim createElement angeben muß ...

Ich dachte, nur bei <input>. Bzw. es funktioniert nur halb: Ein Zugriff auf das Feld über die elements-Collection oder getElementById geht nur, wenn man createElement("<input id='bla'>") verwendet hat (IIRC).
Aber ChrisB oder Struppi haben das vermutlich besser im Kopf als ich - ich müsste es erst testen. Struppi hatte das mal im Detail untersucht, glaube ich.

Mathias

[ChrisB]

Hi,

Aber ChrisB oder Struppi haben das vermutlich besser im Kopf als ich

<answer style="voice-family:igor">You rang, Thur?</answer>

Ich dachte, nur bei <input>. Bzw. es funktioniert nur halb: Ein Zugriff auf das Feld über die elements-Collection oder getElementById geht nur, wenn man createElement("<input id='bla'>") verwendet hat (IIRC).

Ich hab' gerade noch mal einen kleine Test gemacht, zwei Formularfelder erzeugt, name und value gesetzt und in ein Formular eingehängt:

	var feld1 = document.createElement("input");  
	feld1.name = "feld1";  
	feld1.value = "feld1 value";  
	document.forms[0].appendChild(feld1);  
	var feld2 = document.createElement('<input name="feld2"\>');  
	feld2.value = "feld2 value";  
	document.forms[0].appendChild(feld2);  
	document.forms[0].elements[2].onclick = checkfields;

Per POST übermittelt der IE name=value für beide.

Wenn ich über document.forms[0].elements per for-Schleife iteriere, und mir
document.forms[0].elements[i].name
und
document.forms[0].elements[i].value
zur Kontrolle ausgeben lasse, liefert er mit auch für beide(!) den Namen und Inhalt.

Erst dann, wenn ich versuche über document.forms[0].elements['feld1'] zuzugreifen, scheitert es, ergibt undefined.
document.forms[0].elements['feld2'] hingegen ist ansprechbar.

Der Inhalt von name ist also schon irgendwie vorhanden, und auch ermittelbar, wenn man das Feld bspw. über seinen nummerischen Index in der elements-Collection anspricht.
Nur der direkte Zugriff über den Namen ist beim "normal" erzeugten Inputfeld nicht möglich; bei dem mit der zweiten Methode mit "IE-Syntax" erzeugten aber sehr wohl.
Diese IE-Extrawurst muss man also nur dann braten, wenn man wirklich Zugriff auf das Feld über seinen Namen benötigt.

MfG ChrisB

[Deus Figendi]

Hallo Mathias

Das wird im IE gar nicht funktionieren. Du musst hier das Schema des traditionellen Event-Handlings einhalten und eine Funktion zuweisen:

a1.onmouseover = setSeite_events.onMouseOver;

a1.onmouseout = setSeite_events.onMouseOut;
a1.onclick = function () {
   setSeite_Events.onClick('L');
};

Komisch, ich habe mit dieser Methode ebenfalls recht schlechte Erfahrungen gemacht und handhabe es eigentlich immer so:  
`a1.addEventListener("click", function(e) { irgendeineFunktion("mit","drei","Argumenten"); } ,false);`{:.language-javascript}  
Wobei man natürlich ggf auch die ganze Funktion anonym schreiben könnte, aber das finde ich unschön und unübersichtlich :)

-- 
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ\_de:] zu:) fl:( ss:| ls:[ js:(

[Deus Figendi]

Entschuldige, da war ich wohl etwas vorschnell, denn hätte ich deinen Artikel vollständiger gelesen BEVOR ich antwortete hätte ich wohl erkannt dass du dich mit dieser Methode ja ebenfalls beschäftigt und diese auch verglichen hast.
Da ich (fast) nie für den IE schreibe war mir diese Problematik nicht bekannt. Existiert dieses Problem denn noch? Also in aktuellen Versionen des IE? Würde mich durchaus mal interessieren aber ich habe im Moment nicht die Möglichkeit es zu probieren und in deinem Artikel konnte ich weder Datum des Artikels noch Version (des besprochenen IE) entdecken.
Zum IE wird nur an zwei Stellen erwähnt dass er auch in der achten Version kein "DOMContentLoaded" und kein "Code als String zuweisen" beherrsche. Aber wie gesagt, es ist auch denkbar dass ich nur unaufmerksam war und die entsprechenden Hinweise einfach überlesen habe.

[molily]

Da ich (fast) nie für den IE schreibe war mir diese Problematik nicht bekannt. Existiert dieses Problem denn noch? Also in aktuellen Versionen des IE?

Ja. Auch der neueste IE 8 unterstützt addEventListener aus DOM 2 Events noch nicht. Über zukünftige IEs ist noch nichts entsprechendes bekannt.

Würde mich durchaus mal interessieren aber ich habe im Moment nicht die Möglichkeit es zu probieren und in deinem Artikel konnte ich weder Datum des Artikels noch Version (des besprochenen IE) entdecken.

Werde ich ergänzen. Danke für den Tipp!

Mathias

[André Derron]

Hallo Leute

Danke bestens für die Hinweise, hatte Tomaten auf den Augen
nun läuft die Sache auf allen Browsern

Schöne Woche, André

a1.onmouseover = setSeite_events.onMouseOver;

a1.onmouseout = setSeite_events.onMouseOut;
a1.onclick = function () {
   setSeite_Events.onClick('L');
};

>   
> Mathias

[MudGuard]

Hi,

Abgesehen von dem was molily erwähnte (und dem, was ich dort antwortete):

pic = document.createElement("img");
        pic.setAttribute("id",myConst.picSeite);
        pic.setAttribute("usemap","#mapPicSeite");

In diesem Moment zeigt usemap ins Nirvana, da

var m = document.createElement("map");
        m.setAttribute("id","mapPicSeite");
        m.setAttribute("name","mapPicSeite");

erst hier die map erzeugt wird.

Ich könnte mir vorstellen, daß das auch ein Problem darstellen könnte (hab es aber nicht nachgeprüft).

cu,
Andreas