<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<Style type="text/css">
<!--
body{ background-color:pink;
font-size:22pt;
font-weight:bold;
}
.red{ color:rgb(255,0,0);
font-style:italic;
font-size:32;
}
.blue{ color:blue;
font-size:36;
}
.green{ color:green;
font-size:40;
}
.yellow{ color:yellow;
font-size:45;
}
.black{ color:black;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function init()
{
div1 = document.getElementById("first");
div2 = document.getElementById("second");
div3 = document.getElementById("third");
div4 = document.getElementById("fouth");
}
function colorText(e)
{
switch (e.srcElement.id)
{
case "first": div1.className="red";break;
case "second": div2.className="blue";break;
case "third": div3.className="green";break;
case "fouth": div4.className="yellow";break;
}
}
function unColorText(e)
{
switch (e.srcElement.id)
{
case "first": div1.className="black";break;
case "second": div2.className="black";break;
case "third": div3.className="black";break;
case "fouth": div4.className="black";break;
}
}
//-->
</SCRIPT></HEAD>
<BODY onLoad="init()">
<H1>月夜忆舍弟</H1>
<div id="first" style="position:absolute;top:100px" onMouseOver="unColorText(event)" onMouseOut="colorText(event)">戌鼓断人行，秋边一雁声。</div>
<div id="second" style="position:absolute;top:150px" onMouseOver="unColorText(event)" onMouseOut="colorText(event)">露从今夜白，月是故乡明。</div>
<div id="third" style="position:absolute;top:200px" onMouseOver="unColorText(event)" onMouseOut="colorText(event)">有弟皆分散，无家问死生。</div>
<div id="fouth" style="position:absolute;top:250px" onMouseOver="unColorText(event)" onMouseOut="colorText(event)">寄书长不达，况乃未休兵。</div>
</BODY>
</HTML>
为什么打开这个页面什么也不显示呀？
