nicht angemeldet
Hallo JavaScript-Fans,
ich probiere gerade mit Javascript ein dynamisches Klickspiel zu programmieren.
Dabei würde ich gern mit appendChild() arbeiten.
Ich habe viele DIVs, die mit lauter kleine Bildern mit Area-Maps zum Klicken vollgestopft sind. Außerdem haben sie alle ihre jeweiligen style-Formatierungen "position:absolute, usw...".
Da es sich um sehr viele DIVs handelt wird die HTML-Datei sehr groß (60 - 80 KB).
Nun kam mir die Idee alle DIV-Style-Elemente sowie die Bildchen in den DIVs und die Klick-Map mit den immer gleichen Koordinaten erst durch JavaScript einzufügen. Dazu übergebe ich die variablen Werte für jedes DIV in ein Array (feldParam) und weise diese durch Javascript den jeweiligen leeren DIVs zu. Die style-Definitionen sind kein Problem. Doch die per appendChild() eingefügten <map> und <area>-Befehle funktionieren leider nicht im IE 6. Mein Standardbrowser Mozilla zeigt alles brav an. Doch im IE kann ich nicht auf meine Bildchen klicken, da die Image-Maps nicht aktiviert sind...
Gibt es einen Trick, den IE doch noch zu überreden?
Hat jemand schon mal diese Problem gehabt?
function divparams(id){
var d = document.getElementById('f' + id);
d.style.position = "absolute";
d.style.visibility = (feldParam[(id-1)][1]=="v") ? "visible" : "hidden";
d.style.left = feldParam[(id-1)][2];
d.style.top = feldParam[(id-1)][3];
d.style.width = feldParam[(id-1)][4];
d.style.height = feldParam[(id-1)][5];
d.style.zIndex = feldParam[(id-1)][6];
var myimg = document.createElement("img");
myimg.setAttributeNode(makeAttribut("id","b" + id));
myimg.setAttributeNode(makeAttribut("src",bildVerz + feldParam[(id-1)][7] + ".gif"));
myimg.setAttributeNode(makeAttribut("width",feldParam[(id-1)][4]));
myimg.setAttributeNode(makeAttribut("heigth",feldParam[(id-1)][5]));
myimg.setAttributeNode(makeAttribut("border","0"));
myimg.setAttributeNode(makeAttribut("usemap","#map" + id));
/* MAP UND AREA GEHT LEIDER NICHT MIT IE */
var mymap = document.createElement("map");
mymap.setAttributeNode(makeAttribut("name","map" + id));
var myarea = document.createElement("area");
myarea.setAttributeNode(makeAttribut("shape","poly"));
myarea.setAttributeNode(makeAttribut("coords","55,0,110,32,110,95,55,127,0,95,0,32"));
myarea.setAttributeNode(makeAttribut("href","javascript:void(0);"));
myarea.setAttributeNode(makeAttribut("onClick","bildwechsel('b" + id + "')"));
mymap.appendChild(myarea);
d.appendChild(myimg);
d.appendChild(mymap);
}
function divfuellen(){
for(var i=1;i<=feldParam.length;i++){
divparams(i);
}
}