Dynamisk meny
del 1 |  del 2 |  del 3
 
 
Dette eksempelet viser i hovedsak hvordan man kan vise og skjule deler av en tabell ved å reagere på at man klikker på et bilde i tabellen. Bildene som brukes i dette eksempelet finner du nedenfor. Du kan laste dem ned ved å høyreklikke på dem og velge "Lagre bilde som...".
    opp.gif:    
    opp_on.gif:    
    ned.gif:    
    ned_on.gif:    
    bakgrunn_overskrift.jpg:    
Vi begynner med HTML-koden som setter opp tabellen. Hvis du trenger hjelp til å forstå bruken av nøstede tabeller kan du lese eksempelet "Tabeller med overskriftsceller" på HTML-seksjonen.
    <table width="176" bgcolor="#3870A8" border="0" cellspacing="0" cellpadding="3"><tr><td>
    <table width="100%" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="2"><tr><td>
    <table width="100%" border="0" cellspacing="0" cellpadding="3"><tr><td valign="top">
    <table bgcolor="#3870A8" cellpadding="1" cellspacing="0" border="0" width="100%"><tr><td>
      <table cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td><table background="bakgrunn_overskrift.jpg" width="100%" cellpadding="3" cellspacing="0" border="0"><tr>
          <td><span class="meny">Diverse</span></td>
          <td width="9" valign="middle"><img src="opp.gif" alt="Klikk for å vise/skjule" width="12" height="12"></td></tr></table>
        </td>
      </tr>
      <tr><td height="1"></td></tr>
      <tr bgcolor="#D1E1F1">
        <td>
             <a href="hoved.html" target="hoved" class="menyvalg">Hovedside</a><br>
             <a href="humor.html" target="hoved" class="menyvalg">Humorside</a><br>
             <a href="venner.html" target="hoved" class="menyvalg">Venner's hjemmesider</a><br>
             <a href="logg.html" target="hoved" class="menyvalg">Logg</a>
        </td>
      </tr>
      </table>
    </td></tr></table>
    </td></tr></table>
    </td></tr></table>
    </td></tr></table>
Diverse Klikk for å vise/skjule
   Hovedside
   Humorside
   Venner's hjemmesider
   Logg
 

Nå skal vi gi de forskjellige delene av tabellen et navn, slik at vi kan gjøre forandringer på disse med javascriptet vi skal lage senere. Vi angir navnet til radene med egenskapen id.
    <table width="176" bgcolor="#3870A8" border="0" cellspacing="0" cellpadding="3"><tr><td>
    <table width="100%" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="2"><tr><td>
    <table width="100%" border="0" cellspacing="0" cellpadding="3"><tr><td valign="top">
    <table bgcolor="#3870A8" cellpadding="1" cellspacing="0" border="0" width="100%"><tr><td>
      <table cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td><table background="bakgrunn_overskrift.jpg" width="100%" cellpadding="3" cellspacing="0" border="0"><tr>
          <td><span class="meny">Diverse</span></td>
          <td width="9" valign="middle"><img src="opp.gif" id="velger_diverse" alt="Klikk for å vise/skjule" width="12" height="12"></td></tr></table>
        </td>
      </tr>
      <tr id="skille_diverse"><td height="1"></td></tr>
      <tr bgcolor="#D1E1F1" id="under_diverse">
        <td>
             <a href="hoved.html" target="hoved" class="menyvalg">Hovedside</a><br>
             <a href="humor.html" target="hoved" class="menyvalg">Humorside</a><br>
             <a href="venner.html" target="hoved" class="menyvalg">Venner's hjemmesider</a><br>
             <a href="logg.html" target="hoved" class="menyvalg">Logg</a>
        </td>
      </tr>
      </table>
    </td></tr></table>
    </td></tr></table>
    </td></tr></table>
    </td></tr></table>
Jeg valgte å kalle den andre raden i tabellen for "skille_diverse", fordi dette er den blå streken som skiller overskriftscellen fra menyvalgene i diverse-menyen. "under_diverse" ble valgt fordi dette er linkene som ligger under diverse-menyen.
Det er alt som skal til av HTML i denne omgang. I del 2 lager vi javascriptet som utfører endringer på tabellen, og i del 3 lager vi hendelsene som kaller på denne funksjonen.

->del 2