효과:
암호:
다음과 같이 코드 코드를 복사합니다.
<head runat="서버">
<제목></제목>
<스타일 유형="텍스트/css">
#배경색
{
너비: 400px;
높이: 400px;
배경: #FFFF00;
텍스트 정렬: 중앙;
테두리: 능선 30pt 빨간색;
여백: 자동;
}
TD
{
테두리: 능선 3점 빨간색;
너비: 100px;
높이: 100px;
}
div
{
너비: 자동;
높이: 100px;
텍스트 정렬: 중앙;
줄 높이: 100px;
}
</style>
<스크립트 유형="텍스트/자바스크립트">
window.onload = 함수() {
var divArry = document.getElementsByName('divname');
var divto = document.getElementById('div12');
var arry = ['봄 축제', '발렌타인 데이', '어떤 축제가 있는지 모르겠어요! ', '청명절', '노동절', '어린이날',
'이번 달에는 큰 축제가 없는 것 같아요! ', '육군의 날', '스승의 날', '국경의 날', '광군절', '크리스마스'];
for (var i = 0; i < divArry.length; i++) {
divArry[i].index = i;
divArry[i].onmouseover = 함수() {
for (var i = 0; i < divArry.length; i++) {
divArry[i].style.Background = '';
}
this.style.Background = '빨간색';
divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>';
}
}
};
</script>
</head>
<본문>
<테이블 id="배경색">
<tr>
<TD>
<div id="div0" name="div이름">
1월
</div>
</td>
<TD>
<div id="div1" name="div이름">
2월
</div>
</td>
<TD>
<div id="div2" name="div이름">
3월
</div>
</td>
<TD>
<div id="div3" name="div이름">
4월
</div>
</td>
</tr>
<tr>
<TD>
<div id="div4" name="div이름">
5월
</div>
</td>
<TD>
<div id="div5" name="div이름">
6월
</div>
</td>
<TD>
<div id="div6" name="div이름">
칠월
</div>
</td>
<TD>
<div id="div7" name="div이름">
팔월
</div>
</td>
</tr>
<tr>
<TD>
<div id="div8" name="div이름">
구월
</div>
</td>
<TD>
<div id="div9" name="div이름">
십월
</div>
</td>
<TD>
<div id="div10" name="div이름">
십일월
</div>
</td>
<TD>
<div id="div11" name="div이름">
12월
</div>
</td>
</tr>
<tr>
<td colspan="4">
<div id="div12">
</div>
</td>
</tr>
</table>
</body>