Dynamisk tabellbakgrunn
del 1 |  del 2 |  del 3
 
 
Dette eksempelet viser hvordan du kan forandre bakgrunnsfargen på en celle i en tabell når man peker på bildet som befinner seg i denne cella (eller forsåvidt hvilket som helst objekt på samme sida). Under finner du bildene som er brukt i eksempelet. Du kan laste dem ned ved å høyreklikke på dem og velge "Lagre bilde som...".
    epost.gif:    
    gjestebok_les.gif:    
    gjestebok_skriv.gif:    
Vi begynner med HTML-koden som setter opp tabellen. Hvis du trenger hjelp til å forstå bruken av nøstede tabeller kan du lese eksempelet "Innramming av celler" på HTML-seksjonen.
    <table width="200" 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>
      <table width="100%" bgcolor="#3870a8" border="0" cellspacing="0" cellpadding="3">
        <tr>
        <td align="center">
          <a href="mailto:eloekset@online.no"><img src="epost.gif" width="31" height="29" border="0"></a>
        </td>
        <td align="center">
          <a href="gjestebok_les.html"><img src="gjestebok_les.gif" width="32" height="27" border="0"></a>
        </td>
        <td align="center">
          <a href="gjestebok_skriv.html"><img src="gjestebok_skriv.gif" width="32" height="32" border="0"></a>
        </td>
        </tr>
      </table>
    </td></tr></table>
    </td></tr></table>
    </td></tr></table>
 

Nå skal vi gi cellene navnereferanser, slik at vi kan utføre handlinger på disse i form av å endre på egenskapen bakgrunnsfarge. Hver celle skal ha et eget navn. Dette angis med egenskapen id.
    <table width="200" 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>
      <table width="100%" bgcolor="#3870a8" border="0" cellspacing="0" cellpadding="3">
        <tr>
        <td align="center" id="epost">
          <a href="mailto:eloekset@online.no"><img src="epost.gif" width="31" height="29" border="0"></a>
        </td>
        <td align="center" id="les">
          <a href="gjestebok_les.html"><img src="gjestebok_les.gif" width="32" height="27" border="0"></a>
        </td>
        <td align="center" id="skriv">
          <a href="gjestebok_skriv.html"><img src="gjestebok_skriv.gif" width="32" height="32" border="0"></a>
        </td>
        </tr>
      </table>
    </td></tr></table>
    </td></tr></table>
    </td></tr></table>
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