ボタンのように色が変わる

<HTML> <HEAD> <TITLE>ボタンのように色が変わる</TITLE> <STYLE TYPE-"text/css"> <!-- H1 { font: bold 16pt Verdana; text-align: center; color: #600060; } DIV.link { background: white; border: solid 2px white; width: 350px; cursor: hand; } DIV.link A { font: bold 12px; text-decoration: none; color: #4080FF; } --> </STYLE> <SCRIPT> <!-- var bc = Array("white", "#4080FF", "#4080FF"); var bs = Array("solid", "outset", "inset"); var cc = Array("#4080FF", "white", "white"); function ChangeStyle(obj, n) { obj.style.backgroundColor=bc[n]; obj.style.borderStyle=bs[n]; obj.children(0).style.color=cc[n]; } function DivClick(obj) { location.href=obj.children(0).href; } //--> </SCRIPT> </HEAD> <BODY BGCOLOR="#FF80A0" onScroll="MoveIndex();"> <H1>ボタンのように色が変わる</H1> <TABLE ALIGN=CENTER WIDTH=360 CELLPADDING=0 CELLSPACING=0 BGCOLOR="#FFFFFF"><TR><TD> <DIV CLASS="link" onMouseOver="ChangeStyle(this, 1)" onMouseOut="ChangeStyle(this, 0)" onMouseDown="ChangeStyle(this, 2)" onMouseUp="ChangeStyle(this, 1)" onClick="DivClick(this)"> <A HREF="../kage/index.html">タイトルに影をつける</A> </DIV> <DIV CLASS="link" onMouseOver="ChangeStyle(this, 1)" onMouseOut="ChangeStyle(this, 0)" onMouseDown="ChangeStyle(this, 2)" onMouseUp="ChangeStyle(this, 1)" onClick="DivClick(this)"> <A HREF="../kotae/index.html">ドラッグすると答えが見える</A> </DIV> <DIV CLASS="link" onMouseOver="ChangeStyle(this, 1)" onMouseOut="ChangeStyle(this, 0)" onMouseDown="ChangeStyle(this, 2)" onMouseUp="ChangeStyle(this, 1)" onClick="DivClick(this)"> <A HREF="../slide/index.html">スライドショー</A> </DIV> <DIV CLASS="link" onMouseOver="ChangeStyle(this, 1)" onMouseOut="ChangeStyle(this, 0)" onMouseDown="ChangeStyle(this, 2)" onMouseUp="ChangeStyle(this, 1)" onClick="DivClick(this)"> <A HREF="../ugoku/index.html">画像が連続して動く</A> </DIV> <DIV CLASS="link" onMouseOver="ChangeStyle(this, 1)" onMouseOut="ChangeStyle(this, 0)" onMouseDown="ChangeStyle(this, 2)" onMouseUp="ChangeStyle(this, 1)" onClick="DivClick(this)"> <A HREF="../button/index.html">ボタンのように色が変わる</A> </DIV> </TD></TR></TABLE> </BODY> </HTML>