Inhoud

Hoofdstuk 10 - Opdracht 4

De opdracht:

Maak een tabel waarin elke keer dat de muiscursor over een cel heen beweegt de achtergrond daarvan zwart wordt en de waarde in de cel (in eerste instantie 0) opgehoogd wordt.
Bij het verlaten van de cel moet de achtergrond weer wit worden.
Maak gebruik van this.

Het antwoord:

Zie code.

JavaScript:

// Functie voor wanneer de muis de cel verlaat
function out()
{
    // Verander de kleuren, via de CSS-stijl
    this.style.backgroundColor = "#fff";
    this.style.color = "#000";
}
 
// Functie voor wanneer de muis over de cel heen beweegt
function over()
{
    // Verander de kleuren, via de CSS-stijl
    this.style.backgroundColor = "#000";
    this.style.color = "#fff";
 
    // Verhoog de waarde in de cel met 1
    ++this.innerHTML;
}
 
// Alle events initialiseren
function initEvents()
{
    // Sla alle td's in het document op in een array
    var tds = document.getElementsByTagName("td");
    // Loop die array van td's langs
    for(var i = 0; i < tds.length; ++i)
    {
        // Ken events toe aan de huidige td
        tds[i].onmouseover = over;
        tds[i].onmouseout = out;
    }
}
window.onload = initEvents;

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
 <head>
  <title>Celkleur volgt muis</title>
  <style type="text/css">
   table
   {
       border: 1px solid #000;
   }
   td
   {
      border: 1px solid #000;
      font-size: 48px;
      width: 75px;
      height: 75px;
      text-align: center;
   }
  </style>
 </head>
 <body> 
  <p>Beweeg met de muiscursor over de cellen</p>
  <table>
   <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
   <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
   <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
   <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
   <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
   <tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
  </table>
 </body>
</html>