背景色に応じて、時計(の針，など)の色を変えるには？
はじめまして。
下記のソースは、所謂"マウスストーカー(時計)"を引き立たせるために
背景色と組み合わせたものですが、それぞれの背景色に応じて任意に
"date color"・"face color"・"hours color・"minutes color・
"seconds color”を変えられるようにしたいのですが、なかなか
うまくリンクできません(＊普通の文字は、変わります)。
どこを，どのように書き換えればよいか、ご教示いただけませんでしょうか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<TITLE>Magical clock - JavaScript</TITLE>
<style type="text/css">
<!--
.butt{
BACKGROUND:maroon; COLOR:gold;
}
.css1{
position:absolute;top:0px;left:0px;
width:19px;height:19px;
font-family:Arial,sans-serif;
font-size:19px;
text-align:center;
font-weight:bold;
}
.css2{
position:absolute;top:0px;left:0px;
width:13px;height:13px;
font-family:Arial,sans-serif;
font-size:13px;
text-align:center;
}
//-->
</style>
<script type="text/javascript">
<!-- //
//
function color1(){
document.bgColor = "black";
document.fgColor = "gold";
}
//
//
function color2(){
document.bgColor = "darkgreen";
document.fgColor = "pink";
}
//
//
function color3(){
document.bgColor = "#ff99ff";
document.fgColor = "green";
}
//
// -->
</script>
</HEAD>
<BODY>
<p><FONT size="5"><B>魔法の時計</B></FONT></p>
<br><br><br><br><br><br><br><br>
<script language="JavaScript">
<!--
//
if (document.getElementById&&!document.layers){
// *** Clock colours
dCol='blue'; //date colour.
fCol='pink'; //face colour.
sCol='yellow'; //seconds colour.
mCol='red'; //minutes colour.
hCol='red'; //hours colour.
// *** Controls
del=0.6; //Follow mouse speed.
ref=40; //Run speed (timeout).
//
var ieType=(typeof window.innerWidth != 'number');
var docComp=(document.compatMode);
var docMod=(docComp && docComp.indexOf("CSS") != -1);
var ieRef=(ieType && docMod)
?document.documentElement:document.body;
theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;
D=tmpdate.split("");
N='3 4 5 6 7 8 9 10 11 12 1 2';
N=N.split(" ");
F=N.length;
H='☆☆☆☆';
H=H.split("");
M='☆☆☆☆☆';
M=M.split("");
S='-----';
S=S.split("");
siz=65;
eqf=360/F;
eqd=360/D.length;
han=siz/5.5;
ofy=-7;
ofx=-3;
ofst=70;
tmr=null;
vis=true;
mouseY=0;
mouseX=0;
dy=new Array();
dx=new Array();
zy=new Array();
zx=new Array();
tmps=new Array();
tmpm=new Array();
tmph=new Array();
tmpf=new Array();
tmpd=new Array();
var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;
for (i=0; i < sum; i++){
dy[i]=0;
dx[i]=0;
zy[i]=0;
zx[i]=0;
}
algn=new Array();
for (i=0; i < D.length; i++){
algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;
document.write('<div id="_date'+i+'" class="css2" style="color:'+dCol+'">'+D[i]+'<\/div>');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'<\/div>');
tmpf[i]=document.getElementById("_face"+i).style;
}
for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'<\/div>');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'<\/div>');
tmpm[i]=document.getElementById("_minutes"+i).style;
}
for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'<\/div>');
tmps[i]=document.getElementById("_seconds"+i).style;
}
function onoff(){
if (vis){
vis=false;
document.getElementById("control").value="Clock On";
}
else{
vis=true;
document.getElementById("control").value="Clock Off";
Delay();
}
kill();
}
function kill(){
if (vis)
document.onmousemove=mouse;
else
document.onmousemove=null;
}
function mouse(e){
var msy = (!ieType)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
mouseY = e.pageY + ofst - msy;
mouseX = e.pageX + ofst;
}
else{
mouseY = e.clientY + ofst - msy;
mouseX = e.clientX + ofst;
}
if (!vis) kill();
}
document.onmousemove=mouse;
function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight;
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
}
winDims();
window.onresize=new Function("winDims()");
function ClockAndAssign(){
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs-15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins-15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
for (i=0; i < S.length; i++){
tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";
}
for (i=0; i < M.length; i++){
tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";
tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";
}
for (i=0; i < H.length; i++){
tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";
}
for (i=0; i < F; i++){
tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";
}
for (i=0; i < D.length; i++){
tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";
}
if (!vis)clearTimeout(tmr);
}
buffW=(ieType)?80:90;
function Delay(){
scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;
if (!vis){
dy[0]=-100;
dx[0]=-100;
}
else{
zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);
zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);
}
for (i=1; i < sum; i++){
if (!vis){
dy[i]=-100;
dx[i]=-100;
}
else{
zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
}
if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;
}
tmr=setTimeout('Delay()',ref);
ClockAndAssign();
}
window.onload=Delay;
}
//-->
</script>
<center><p>
<INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:
grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 1px
solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: black"
onclick="color1()" type="button" value="
">
<INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:
grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 1px
solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: darkgreen"
onClick="color2()" type="button" value="
">
<INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:
grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 1px
solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: #ff99ff"
onClick="color3()" type="button" value="
">
</p></center>
<br><br><br>
<center><p>
<script type="text/javascript">
<!-- Mouse Clock Button
//Hide from older browsers
if (document.getElementById&&!document.layers){
document.write('<input class=butt type="button" id="control" value="Clock Off" onClick="this.blur();onoff()"></span>');
}
//-->
</script>
</p></center>
</BODY>
</HTML>