効果：
コード：
次のようにコードをコピーします。
<head runat="サーバー">
<タイトル></タイトル>
<style type="text/css">
#バックカラー
{
幅: 400ピクセル;
高さ: 400ピクセル;
背景: #FFFF00;
テキスト整列: 中央;
ボーダー: リッジ 30pt 赤;
マージン: 自動;
}
TD
{
ボーダー: リッジ 3pt 赤;
幅: 100ピクセル;
高さ: 100ピクセル;
}
ディビジョン
{
幅: 自動;
高さ: 100ピクセル;
テキスト整列: 中央;
行の高さ: 100px;
}
</スタイル>
<script type="text/javascript">
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 = function () {
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="divname">
1月
</div>
</td>
<td>
<div id="div1" name="divname">
2月
</div>
</td>
<td>
<div id="div2" name="divname">
行進
</div>
</td>
<td>
<div id="div3" name="divname">
4月
</div>
</td>
</tr>
<tr>
<td>
<div id="div4" name="divname">
5月
</div>
</td>
<td>
<div id="div5" name="divname">
6月
</div>
</td>
<td>
<div id="div6" name="divname">
7月
</div>
</td>
<td>
<div id="div7" name="divname">
8月
</div>
</td>
</tr>
<tr>
<td>
<div id="div8" name="divname">
9月
</div>
</td>
<td>
<div id="div9" name="divname">
10月
</div>
</td>
<td>
<div id="div10" name="divname">
11月
</div>
</td>
<td>
<div id="div11" name="divname">
12月
</div>
</td>
</tr>
<tr>
<tdcolspan="4">
<div id="div12">
</div>
</td>
</tr>
</テーブル>
</body>