Javascript : exemples avec le code source

F - Modification des styles

Couleur au survol

  Entrée Plat Dessert
Lundi Carrotes Pizza Yaourt
Mardi Potage Spagetti Tarte
Jeudi Pâté Ratatouille Eclaire
Vendredi Tomates Gratin Flan

Code html

<html>
<head>
<style type="text/css">
td.n1 {
background-color:#CCCCCC;
border:1px solid #000000;
font-weight:bold;
}
td.n2 {
border:1px solid #000000;
}
tr.n {
background-color:#FFFFCC;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td class="n1">Entrée</td>
<td class="n1">Plat</td>
<td class="n1">Dessert</td>
</tr>
<tr class="n" onMouseOver="this.style.backgroundColor='#FF9999'" onMouseOut="this.style.backgroundColor='#FFFFCC'">
<td class="n1">Lundi</td>
<td class="n2">Carrotes</td>
<td class="n2">Pizza</td>
<td class="n2">Yaourt</td>
</tr>
<tr class="n" onMouseOver="this.style.backgroundColor='#FF9999'" onMouseOut="this.style.backgroundColor='#FFFFCC'">
<td class="n1">Mardi</td>
<td class="n2">Potage</td>
<td class="n2">Spagetti</td>
<td class="n2">Tarte</td>
</tr>
<tr class="n" onMouseOver="this.style.backgroundColor='#FF9999'" onMouseOut="this.style.backgroundColor='#FFFFCC'">
<td class="n1">Jeudi</td>
<td class="n2">Pâté</td>
<td class="n2">Ratatouille</td>
<td class="n2">Eclaire</td>
</tr>
<tr class="n" onMouseOver="this.style.backgroundColor='#FF9999'" onMouseOut="this.style.backgroundColor='#FFFFCC'">
<td class="n1">Vendredi</td>
<td class="n2">Tomates</td>
<td class="n2">Gratin</td>
<td class="n2">Flan</td>
</tr>
</table>
</body>
</html>
Validé XHTML 1.1    Validé CSS