Lage et album

Skal lage et album som viser frem bilder og tekst fra ulike elgopplevelser

Problem1

Bytte ut et bilde med et annet.

Kode:

<html>
<head>
<script type="text/javascript">
  var elg1 = "bilder/elg1.jpg";
  var elg2 = "bilder/elg2.jpg";

  function changepic(bilde)
  {
    document.getElementById("hovedbilde").src=bilde;
  }

</script>
</head>

<body>
  <h1>Elgminner<h1>
  <div><img id="hovedbilde" src="bilder/elg1.jpg"      
        width="300" height="250" /></div>
  <input type="button" onclick="changepic(elg2)"
         value="Bytt bilde" />
</body>
</html>

Eksempel: elgminner1.html

Problem2

Tillegg i scriptet
...
  var elgtekst1 = "Denne elgen traff jeg en natt ved Tra...   ";
  var elgtekst2 = "Denne elgen er søt.";

  function changetekst(tekst)
  {
    document.getElementById("tekstfelt").innerHTML=tekst;
  }
...

<body>
  <h1>Elgminner</h1>
  <div><img id="hovedbilde" src="bilder/elg1.jpg"  
        width="300" height="250" /></ div>
  <div id="tekstfelt">Denne elgen traff jeg en natt ved
       Trantjern. Et hyggelig møte</div>
  <input type="button" onclick="changepic(elg2);
         changetekst(elgtekst2)" value="Bytt bilde">
</body>
</html>

Eksempel: elgminner2.html

Problem 3

Må legge til et stilsett

<style type="text/css">
  div.scroll
  {
    background-color:white;
    width:315px;
    height:85px;
    overflow: auto;
    clear:left;
    margin-top:10;
    border:1px solid gray;
    padding:0em;
  }
</style>

Må legge til listen i html-dokumentet:

<div class="scroll">
  <table>
    <tr>
      <td onclick="changepic(elg1); changetekst(elgtekst1)">
          <img id="tb1" src="bilder/litenelg1.jpg"/></td> 
      <td onclick="changepic(elg2); changetekst(elgtekst2)">
          <img id="tb2" src="bilder/litenelg2.jpg"/></td> 
      <td onclick="changepic(elg3]); changetekst(elgtekst3)">
          <img id="tb3" src="bilder/litenelg3.jpg"/></td>
      <td onclick="changepic(elg4); changetekst(elgtekst4)">
          <img id="tb4" src="bilder/litenelg4.jpg"/></td>
      <td onclick="changepic(elg5); changetekst(elgteks5)">
          <img id="tb5" src="bilder/litenelg5.jpg"/></td>
    </tr>
  </table> 
</div>

Eksempel: elgminner3.html

Problem4

Eksempler: