Eerst gaan we het menu zelf maken

De Html code voor het menu


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tabel achtergrond veranderen bij muisover</title>
</head>
<body>
<table width="150" cellpadding="3">
<tr>
<td>Menu 1 </td>
</tr>
<tr>
<td>Menu 2 </td>
</tr>
<tr>
<td>Menu 3 </td>
</tr>
<tr>
<td>Menu 4 </td>
</tr>
</table>
</body>
</html>
Zoals je ziet een heel simpel menu.

De Css bepaling

Natuurlijk hebben we Css nodig om het effect te verkrijgen, we gaan bepalen welke kleur bij welke toestand (off en on) gaat horen. Knip en plak deze code tussen je <head></head>

td.off {
background: #CCCCCC;
}
td.on {
background: #999999;
}

td.off is de toestand waarin de tabel cel zich in normale toestand bevindt, de kleur hiervoor is #cccccc

td.on is de toestand waarin de tabel cel zich in aktieve toestand bevindt, dus als er iemand met zijn muis overheen gaat (hoveren), de kleur hiervoor is #999999.

Bijna klaar, nog een beetje code

Om alles ook nog te laten werken moeten we de Html code een beetje aanpassen, er moet namelijk aan de browser verteld worden wat er moet gebeuren met de Css code.

De <td> geven we de class td.off, dit is de normale toestand, dus #cccccc als achtergrond kleur.

<td class="off" >Menu 1-4 </td>

Nu gaan we ook bepalen wat er moet gebeuren als de aktieve toestand bereikt wordt, dit gebeurd met onmouseover en onmouseout

<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'">Menu 1-4 </td>

onmouseover=”this.className=’on’” bepaald de toestand als iemand met de muis over de tabel cel gaat

onmouseout=”this.className=’off’” bepaald de toestand die normaal is, dus als de muis er terug vanaf is.

De volledige Html en Css

Knip en plak

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tabel achtergrond veranderen bij muisover</title>
<style type="text/css">
td.off {
background: #CCCCCC;
}
td.on {
background: #999999;
}
</style>
</head>
<body>
<table width="150" cellpadding="3">
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'">Menu
1 </td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'">Menu
2 </td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'">Menu
3 </td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'">Menu
4 </td>
</tr>
</table>
</body>
</html>

Een voorbeeld