nicht angemeldet
Hi , ich habe wiedereinmal leider ein Problem wo ich nicht verstehe warum dem so ist .
Ich erstelle eine Tabelle dynamisch , erstelle in jedem td der Tabelle ein image und div . beim klicken dann auf den td inhalt wird eine funktion aufgerufen welche mir eine box ausgiebt über der Tabelle positioniert nach dem td element wo man draufklickte . Soweit sogut funktioniert es auch . Jetzt aber das Problem , das neue element wird mir hinter der Tabelle angezeigt , die Tabelle bleibt im Vordergung und das neue Element ist somit sogut wie nicht sichtbar :( Ich habe es nun versucht mittels z-index aber das klappt leider irgendwie nicht . Hier der Code . Bin für jeglichen Denkanstoß / Hilfe dankbar .
//-------- Ich erstelle die Tabelle --------------
var tr;
var td;
var imgmap;
function tabelleerstellen(){
var table = document.createElement("table");
tablebody = document.createElement("tbody");
table.appendChild(tablebody);
for(i=0;i<20;i++){
tr = document.createElement('tr');
tablebody.appendChild(tr);
for(j=0;j<20;j++){
td = document.createElement('td');
td.setAttribute("id",i+"_"+j);
td.style.width = "40";
td.style.height = "40";
//td.appendChild(document.createTextNode("hi text"));// damit man was sieht
imgmap = document.createElement("img");
imgmap.setAttribute("id", i+"I"+j);
imgmap.src = "empty.gif"
imgmap.style.width = "40";
imgmap.style.height = "40";
//imgmap.onclick = function() { mapcordanwahl(this.attributes.id.nodeValue); }
divmap = document.createElement('div');
divmap.setAttribute("id", i+"D"+j);
divmap.style.position = "relative";
divmap.onclick = function() { mapcordanwahl(this.attributes.id.nodeValue); }
divmap.appendChild(imgmap);
td.appendChild(divmap);
tr.appendChild(td);
}
}
document.getElementById("map").appendChild(table);
}
//-------- ich füge sie in das html element an folgender stelle ein
<td id="tr2td2" style="width:800; height:560; vertical-align:top">
<div id="mapbevordiv" style="position:relative; top:0px; left:0px;">
<div id="map" style="position:absolute; z-index:2; top:0px; left:0px; overflow:hidden; clip:rect(0px, 800px, 560px, 0px);" >
</div>
</div>
</td>
//--------- wenn man auf eine tabellenzelle klickt wird folgende funktion aufgerufen
function mapcordanwahl(ubergabe){
//document.getElementById("box1").style.visibility = "visible";
newdiv = document.createElement("div");
newdiv.setAttribute("id", "box");
document.getElementById(ubergabe).appendChild(newdiv);
document.getElementById("box").onmouseout = mapcordstop;
}
//------------ box habe ich auch schon am anfang der html datei etwas definiert mittels
<style type="text/css">
#box { position:absolute; z-index:4; top:50px; left:50px; width:150px; height:150px; background:blue; border:medium solid black; }
</style>
//-------------------------
Ich habe auch schon versucht der box direct beim erstellen in der js datei einem zIndex über newdiv.style.zIndex = "5"; zuzuordnen , was aber ebensoweig die gewünschte Wirkung zeigt :((