borderColorスタイルの応用

borderColorスタイルの応用

5個の表を入れ子に配置し、各表の枠線の色を上下左右別々に変化させているだけ。

HTML Source......................................................................>>>

<script language="JavaScript"><!--
c1 = "black";  //色の変数、4色あり
c2 = "red";
c3 = "green";
c4 = "pink";
function Border(){
  tbl1.style.borderTopColor = c1;
  tbl1.style.borderRightColor = c2;
  tbl1.style.borderBottomColor = c3;
  tbl1.style.borderLeftColor = c4;
  tbl2.style.borderTopColor = c4;
  tbl2.style.borderRightColor = c1;
  tbl2.style.borderBottomColor = c2;
  tbl2.style.borderLeftColor = c3;
  tbl3.style.borderTopColor = c3;
  tbl3.style.borderRightColor = c4;
  tbl3.style.borderBottomColor = c1;
  tbl3.style.borderLeftColor = c2;
  tbl4.style.borderTopColor = c2;
  tbl4.style.borderRightColor = c3;
  tbl4.style.borderBottomColor = c4;
  tbl4.style.borderLeftColor = c1;
  tbl5.style.borderTopColor = c1;
  tbl5.style.borderRightColor = c2;
  tbl5.style.borderBottomColor = c3;
  tbl5.style.borderLeftColor = c4;
  old_c1 = c1;    //現在の色を記憶しておく
  old_c2 = c2;
  old_c3 = c3;
  old_c4 = c4;
  c1 = old_c4;    //色の変数に、記憶した色を1つズラして設定する
  c2 = old_c1;
  c3 = old_c2;
  c4 = old_c3;
  setTimeout("Border()",800);
}
//--></script>
</head>

<body onload="Border()">
<div align="center">
<table id="tbl1" width="50%" border="0" cellspacing="0" cellpadding="3" 
	  style="border:1px solid white"><tr><td>
<table id="tbl2" width="100%" border="0" cellspacing="0" cellpadding="3" 
	  style="border:1px solid white"><tr><td>
<table id="tbl3" width="100%" border="0" cellspacing="0" cellpadding="3"
	   style="border:1px solid white"><tr><td>
<table id="tbl4" width="100%" border="0" cellspacing="0" cellpadding="3" 
	  style="border:1px solid white"><tr><td>
<table id="tbl5" width="100%" border="0" cellspacing="0" cellpadding="3" 
	  style="border:1px solid white"><tr><td>
<b><font size="4">borderColorスタイルの応用</font></b>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</div>

end(01/12/9)