javascript probleem met document.all...

[handige]

Beste Lezer,

Ik begin net met JS dus misschien is de opl. simpel.

Ik probeer in (HTML) een menustructuur te bedenken. Daarbij zou ik graag een submenu zichtbaar maken bij een mouse-over met toonmenu. Nu komt hij wel in de functie met 'site2' heb ik gecheckt met een alrt-box maar voert hij de "document.all(elmnt).visibility="visible" niet uit (in de css staat ie in het begin op "hidden"):

<td class="navi" onmouseover="toonmenu('site2')" onmouseout="verstopmenu('site2')"
> Nieuws
<table class="menu" id="site2" width="100%">
<tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
<tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
<tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
<tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
<tr><td class="naviu"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
</table> </td>



<script language="JavaScript">
function toonmenu(elmnt)
{

document.all(elmnt).visibility="visible"
}
function verstopmenu(elmnt)
{
all(elmnt).style.visibility="hidden"
}
</script>

 

[Egel]

Zo werkt 't:

<script type="text/javascript">
 function toonmenu(elmnt) {
  document.getElementById(elmnt).style.visibility = 'visible';
  };
 function verstopmenu(elmnt) {
  document.getElementById(elmnt).style.visibility = 'hidden';
  };
</script>

<table>
 <tr>
  <td class="navi" onmouseover="toonmenu('site2')" onmouseout="verstopmenu('site2')"> Nieuws
   <table id="site2" class="menu" style="visibility: hidden;" width="100%">
    <tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
    <tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
    <tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
    <tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
    <tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
   </table>
  </td>
 </tr>
</table>

Ik heb document.getElementById() gebruikt (Ie, Fx, Opera). En er staat style="visibility: hidden;" in de table-tag, dat is namelijk de .style die het script aanspreekt.

Je kunt ook één functie gebruiken:

<script type="text/javascript">
 function flipmenu(elmnt,flip) {
  document.getElementById(elmnt).style.visibility = (flip ? 'visible': 'hidden');
  };
</script>

<table>
 <tr>
  <td class="navi" onmouseover="flipmenu('site2',true)" onmouseout="flipmenu('site2',false)"> Nieuws
   <table id="site2" class="menu" style="visibility: hidden;" width="100%">
    <tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
    <tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
    <tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
    <tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
    <tr><td class="navi"><a href="#.html" target=frame1>Sub Titel</a></td></tr>
   </table>
  </td>
 </tr>
</table>

Vr.Gr. Egel.

 

[handige]

Egel,

Heel erg bedankt! Het werkt goed.
Je kunt die getElementById natuurlijk altijd gebruiken..ik zet hem op opgelost!

 

[Egel]

:thumb:

document.getElementById() is de standaard die in alle browsers werkt.

document.all heeft eigenlijk alleen nut voor IE4 omdat die .getElementById() niet kent, maar IE4 is nu wel zo ongeveer uitgestorven.


Vr.Gr. Egel.