Effet:
Code:
Copiez le code comme suit :
<head runat="serveur">
<titre></titre>
<style type="text/css">
#couleur de fond
{
largeur : 400 px ;
hauteur : 400px ;
arrière-plan : #FFFF00 ;
alignement du texte : centre ;
bordure : crête 30pt rouge ;
marge : auto ;
}
TD
{
bordure : crête 3pt rouge ;
largeur : 100 px ;
hauteur : 100px ;
}
div
{
largeur : automatique ;
hauteur : 100px ;
alignement du texte : centre ;
hauteur de ligne : 100 px ;
}
</style>
<script type="text/javascript">
window.onload = fonction () {
var divArry = document.getElementsByName('divname');
var divto = document.getElementById('div12');
var arry = ['Fête du Printemps', 'Saint Valentin', 'Je ne sais pas quels sont les festivals ! ', 'Festival de Qingming', 'Fête du Travail', 'Journée des Enfants',
« On dirait qu'il n'y a pas de grands festivals ce mois-ci ! ', 'Journée de l'armée', 'Journée des enseignants', 'Fête nationale', 'Journée des célibataires', 'Noël'] ;
pour (var i = 0; i < divArry.length; i++) {
divArry[i].index = je;
divArry[i].onmouseover = fonction () {
pour (var i = 0; i < divArry.length; i++) {
divArry[i].style.background = '';
}
this.style.background = 'rouge';
divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>';
}
}
} ;
</script>
</tête>
<corps>
<table id="backcolor">
<tr>
<td>
<div id="div0" name="divname">
Janvier
</div>
</td>
<td>
<div id="div1" name="nomdiv">
Février
</div>
</td>
<td>
<div id="div2" name="nomdiv">
Mars
</div>
</td>
<td>
<div id="div3" name="nomdiv">
Avril
</div>
</td>
</tr>
<tr>
<td>
<div id="div4" name="divname">
Peut
</div>
</td>
<td>
<div id="div5" name="nomdiv">
Juin
</div>
</td>
<td>
<div id="div6" name="divname">
Juillet
</div>
</td>
<td>
<div id="div7" name="nomdiv">
Août
</div>
</td>
</tr>
<tr>
<td>
<div id="div8" name="divname">
Septembre
</div>
</td>
<td>
<div id="div9" name="divname">
Octobre
</div>
</td>
<td>
<div id="div10" name="nomdiv">
Novembre
</div>
</td>
<td>
<div id="div11" name="nomdiv">
Décembre
</div>
</td>
</tr>
<tr>
<td colspan="4">
<identifiant div="div12">
</div>
</td>
</tr>
</table>
</corps>