Efeito:
Código:
Copie o código do código da seguinte forma:
<head runat="servidor">
<título></título>
<style type="texto/css">
#backcolor
{
largura: 400px;
altura: 400px;
plano de fundo: #FFFF00;
alinhamento de texto: centro;
borda: cume 30pt vermelho;
margem: automático;
}
DT
{
borda: cume 3pt vermelho;
largura: 100px;
altura: 100px;
}
divisão
{
largura: automático;
altura: 100px;
alinhamento de texto: centro;
altura da linha: 100px;
}
</estilo>
<script type="texto/javascript">
janela.onload=função(){
var divArry = document.getElementsByName('divname');
var divto = document.getElementById('div12');
var arry = ['Festival da Primavera', 'Dia dos Namorados', 'Não sei quais festivais existem! ', 'Festival de Qingming', 'Dia do Trabalho', 'Dia das Crianças',
'Parece que não há grandes festivais este mês! ', 'Dia do Exército', 'Dia do Professor', 'Dia Nacional', 'Dia dos Solteiros', 'Natal'];
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 = 'vermelho';
divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>';
}
}
};
</script>
</head>
<corpo>
<table id="backcolor">
<tr>
<td>
<div id="div0" nome="nomediv">
Janeiro
</div>
</td>
<td>
<div id="div1" nome="nomediv">
Fevereiro
</div>
</td>
<td>
<div id="div2" nome="nomediv">
Marchar
</div>
</td>
<td>
<div id="div3" nome="nomediv">
abril
</div>
</td>
</tr>
<tr>
<td>
<div id="div4" nome="nomediv">
Poderia
</div>
</td>
<td>
<div id="div5" nome="nomediv">
Junho
</div>
</td>
<td>
<div id="div6" nome="divnome">
Julho
</div>
</td>
<td>
<div id="div7" nome="divname">
Agosto
</div>
</td>
</tr>
<tr>
<td>
<div id="div8" nome="nomediv">
Setembro
</div>
</td>
<td>
<div id="div9" nome="nomediv">
outubro
</div>
</td>
<td>
<div id="div10" nome="nomediv">
novembro
</div>
</td>
<td>
<div id="div11" nome="nomediv">
dezembro
</div>
</td>
</tr>
<tr>
<td colspan="4">
<div id="div12">
</div>
</td>
</tr>
</tabela>
</body>