Dynamisk tekstfelt
del 1 |  del 2 |  del 3
 
 
I dette eksempelet vil du se hvordan man kan sette inn ønsket tekst i det graderte område i tabellen under. Man skal kunne bytte ut innholdet i tekstområdet uten å måtte laste ned hele websida på nytt. Dette er den simpleste form for DHTML, men kan være veldig praktisk i bruk.

Her er bakgrunnsbildet som blir brukt på tekstfeltet. Du kan laste det ned ved å høyreklikke på det og velge "Lagre bilde som...".
    bakgrunn_tekstfelt.jpg:    
Nedenfor ser du koden som skal til for å lage tabellen vist under. Hvis du trenger trenger hjelp til å forstå HTML-koden som er brukt i denne tabellen kan du lese eksempelet "Tabeller med overskriftsceller" på HTML-seksjonen.
    <table width="177" 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="2"><tr><td>
        <table width="100%" border="0" cellspacing="0" cellpadding="3">
          <tr>
          <td>
            <div class="underoverskrift">Dynamisk tekstfelt</div>
          </td>
          </tr>
          <tr>
          <td valign="top" background="bakgrunn_tekstfelt.jpg" width="100%" height="100">
            <div class="menyforklaring"></div>
          </td>
          </tr>
        </table>
      </td></tr></table>
    </td></tr></table>
    </td></tr></table>
Dynamisk tekstfelt
 
I de to div-objektene har jeg brukt class="underoverskrift" og class="menyforklaring". Dette er referanser som nettleseren bruker for å formatere teksten etter CSS, og har ingen betydning for dette eksempelet. Les CSS-seksjonen for å lære hvordan dette brukes.
 

Nå skal vi gi det dynamiske tekstfeltet en id, slik at javascriptet kan referere til dette objektet når vi skal endre innholdet i det.
    <table width="177" 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="2"><tr><td>
        <table width="100%" border="0" cellspacing="0" cellpadding="3">
          <tr>
          <td>
            <div class="underoverskrift">Dynamisk tekstfelt</div>
          </td>
          </tr>
          <tr>
          <td valign="top" background="bakgrunn_tekstfelt.jpg" width="100%" height="100">
            <div id="tekstfelt" class="menyforklaring"></div>
          </td>
          </tr>
        </table>
      </td></tr></table>
    </td></tr></table>
    </td></tr></table>
Ved hjelp av javascript kan vi nå sette inn alt vi vil av innhold mellom de to taggene <div></div>. Et slik div-objekt kan lages hvor som helst på websida. Du kan t.o.m. lage et lignende objekt på en linje med tekst. Da må du bruke <span id="tekstområde"></span> istedet for div.
Gå til del 2 for å lese hvordan javascriptet lages.

->del 2