Effect:
Code:
Copy the code code as follows:
<head runat="server">
<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', 'I don't know what festivals there are! ', 'Qingming Festival', 'Labor Day', 'Children's Day',
'It seems like there aren't any major festivals this month! ', 'Army Day', 'Teacher's Day', 'National Day', '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 = '<h3>' + this.innerHTML + arry[this.index] + '</h3>';
}
}
};
</script>
</head>
<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">
</div>
</td>
</tr>
</table>
</body>