Efecto:
Código:
Copie el código de código de la siguiente manera:
<head runat="servidor">
<título></título>
<tipo de estilo="texto/css">
#color de fondo
{
ancho: 400px;
altura: 400 px;
fondo: #FFFF00;
alineación de texto: centro;
borde: cresta 30pt rojo;
margen: automático;
}
DT
{
borde: cresta 3pt rojo;
ancho: 100px;
altura: 100 píxeles;
}
div
{
ancho: automático;
altura: 100 píxeles;
alineación de texto: centro;
altura de línea: 100 px;
}
</estilo>
<tipo de script="texto/javascript">
ventana.onload = función () {
var divArry = document.getElementsByName('divname');
var divto = document.getElementById('div12');
var arry = ['Festival de Primavera', 'Día de San Valentín', '¡No sé qué festivales hay! ', 'Festival de Qingming', 'Día del Trabajo', 'Día del Niño',
'¡Parece que no hay festivales importantes este mes! ', 'Día del Ejército', 'Día del Maestro', 'Día Nacional', 'Día de los Solteros', 'Navidad'];
for (var i = 0; i < divArry.length; i++) {
divArry[i].index = i;
divArry[i].onmouseover = función () {
for (var i = 0; i < divArry.length; i++) {
divArry[i].estilo.fondo = '';
}
this.style.background = 'rojo';
divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>';
}
}
};
</script>
</cabeza>
<cuerpo>
<table id="color de fondo">
<tr>
<td>
<div id="div0" nombre="divnombre">
Enero
</div>
</td>
<td>
<div id="div1" nombre="divnombre">
Febrero
</div>
</td>
<td>
<div id="div2" nombre="divnombre">
Marzo
</div>
</td>
<td>
<div id="div3" nombre="divnombre">
Abril
</div>
</td>
</tr>
<tr>
<td>
<div id="div4" nombre="divnombre">
Puede
</div>
</td>
<td>
<div id="div5" nombre="divnombre">
Junio
</div>
</td>
<td>
<div id="div6" nombre="divnombre">
Julio
</div>
</td>
<td>
<div id="div7" nombre="divnombre">
Agosto
</div>
</td>
</tr>
<tr>
<td>
<div id="div8" nombre="divnombre">
Septiembre
</div>
</td>
<td>
<div id="div9" nombre="divnombre">
Octubre
</div>
</td>
<td>
<div id="div10" nombre="nombrediv">
Noviembre
</div>
</td>
<td>
<div id="div11" nombre="divnombre">
Diciembre
</div>
</td>
</tr>
<tr>
<tdcolspan="4">
<div id="div12">
</div>
</td>
</tr>
</tabla>
</cuerpo>