<div> dynamisch ein-ausschalten

[Hilfesuchender]

Hi.

Ich bin schon seit einer ewigkeit am rumprogrammieren. ICh will folgendes realisieren: Eine Tabelle in einem div soll bei onmouseover eines Bildes (genauer genommen <area> )erscheinen!

Ich weiß, dass es geht, die ID dynamisch per JS umzuändert, weil ich es schon einmal angewandt habe. Doch urplötzlich will es nicht mehr funktionieren! Es ist dasslbe Prinzip, nur die Namen bzw IDs sind umgeändert worden.

Quellcode (Ausschnitt :) )
____________________________________________________________________
<script type="text/javascript">
function fctopenmenu(id){
document.getElementbyId('divn'+id).id='divt'+id;
}
</script>

[...]

<style>

#divt1 { position:absolute; left:224px; top:80px; visibility:visible; z-index:3; }
#divn1 { position:absolute; left:224px; top:80px; visibility:hidden; z-index:2; }

</style>

[...]

<div ID="divn1">
 <table>
  [...]
 </table>
</div>

[...]

<img src="[...]" usemap="#NaviLeiste">

[...]

<map name="NaviLeiste">
 <area shape="rect" coords="36, 0, 216, 100" href="index.php">
 <area shape="rect" coords="224, 0, 449, 87" href="#1" onmouseover="fctopenmenu(1)">
 <area shape="rect" coords="458, 0, 708, 86" href="#2" onmouseover="fctopenmenu(2)">
 <area shape="rect" coords="715, 0, 974, 95" href="#3" onmouseover="fctopenmenu(3)">
</map>

____________________________________________________________________

Erklärung:

Es wird folgendes angelegt:
1. ein div element, das später an geschaltet werden soll
2. zwei styles für das div, die sich in "visibility:" unterscheiden
3. ein bild, welches 4 areas hat
4. eine JS-Funktion, welche dafür zuständig ist, das div ein- und auszublenden

Beim überfahren der area 1 wird die funktion aufgerufen. Ihr wird der Parameter "1" übergeben.
Die funktion überprüft nun mittels getElementbyID(), ob ein Element mit der ID 'divn'+id = 'divn'+1 = "divn1" vorhanden ist (= unsichtbares div). Dies ist der fall, und so sollte nun die ID des divs auf 'divt'+id = 'divt'+1 = "divt1" umgeschaltet werden (sichtbares div).

Warum tut es das nicht?

Was ist falsch?

[Indigo]

Abend

document.getElementbyId('divn'+id).id='divt'+id;

----------------------^ Tipfehler?

mfg
Indigo

[Hilfesuchender]

document.getElementbyId('divn'+id).id='divt'+id;
----------------------^ Tipfehler?

Nein

http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id

[wahsaga]

hi,

document.getElementbyId('divn'+id).id='divt'+id;
----------------------^ Tipfehler?

Nein

doch.

http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id

sollte dir aber auffallen, wenn du die seite schon verlinkst.

funktions-/methodennamen in javascript sind case-sensitive.

gruß,
wahsaga

[Christoph Schnauß]

hallo,

Quellcode (Ausschnitt :) )

Warum so umständlich? Nimm einen EventHandler und schreib da ein bißchen CSS rein, und alles wird gut. Schematisch (du mußt das natürlich anpassen) geht das z.B. in einer Tabelle so:

<table border="1"cellspacing="1"><tr>
<td id="z1">Zeile 1</td>
</tr><tr>
<td id="z2" onClick="document.getElementById('z3').style.display='block'; this.style.display='none'" style="display:none; cursor:pointer">Zeile 2</td>
<td id="z3" onClick="document.getElementById('z2').style.display='block'; this.style.display='none'" style="cursor:pointer">Zeile 3</td>
</tr></table>

Grüße aus Berlin

Christoph S.