<title></title>
<style type= "Text/css" >
#backcolor
{
width:400px;
height:400px;
Background: #FFFF00;
Text-align:center;
Border:ridge 30pt Red;
Margin:auto;
}
Td
{
Border:ridge 3pt Red;
width:100px;
height:100px;
}
Div
{
Width:auto;
height:100px;
Text-align:center;
line-height:100px;
}
</style>
<script type= "Text/javascript" >
Window.onload = function () {
var divarry = document.getelementsbyname (' Divname ');
var divto = document.getElementById (' div12 ');
var arry = [' Spring Festival ', ' Valentine's Day ', ' Don't know what holiday! ', ' tomb-Sweeping Day ', ' Labor Day ', ' Children's Day ',
' It's like there's no big holiday this month! ', ' army ', ' Teacher's Day ', ' national Holiday ', ' Singles Day ', ' Christmas '];
for (var i = 0; i < divarry.length; i++) {
Divarry[i].index = i;
Divarry[i].onmouseover = function () {
for (var i = 0; i < divarry.length; i++) {
Divarry[i].style.background = ';
}
This.style.background = ' red ';
divto.innerhtml = ' }
}
};
</script>
<body>
<table id= "BackColor" >
<tr>
<td>
<div id= "Div0" name= "Divname" >
January
</div>
</td>
<td>
<div id= "Div1" name= "Divname" >
February
</div>
</td>
<td>
<div id= "Div2" name= "Divname" >
March
</div>
</td>
<td>
<div id= "Div3" name= "Divname" >
April
</div>
</td>
</tr>
<tr>
<td>
<div id= "Div4" name= "Divname" >
May
</div>
</td>
<td>
<div id= "div5" name= "Divname" >
June
</div>
</td>
<td>
<div id= "Div6" name= "Divname" >
July
</div>
</td>
<td>
<div id= "div7" name= "Divname" >
August
</div>
</td>
</tr>
<tr>
<td>
<div id= "Div8" name= "Divname" >
September
</div>
</td>
<td>
<div id= "div9" name= "Divname" >
October
</div>
</td>
<td>
<div id= "div10" name= "Divname" >
November
</div>
</td>
<td>
<div id= "div11" name= "Divname" >
December
</div>
</td>
</tr>
<tr>
<TD colspan= "4" >
<div id= "Div12" style= "width:400px;" >
</div>
</td>
</tr>
</table>
</body>
