TAKABO SOFT NETWORK

まず、ヘッダーの部分に以下のプログラムを組み込みます。

<head>

<script language="javascript">
<!--

var count_max=14;	//何回背景を変更させるか
var st_col="4444a0";	//開始色
var ed_col="ffffff";	//終了色
var speed=30;		//変化の速度（小さい程速い）

var df_col;
var count=0;
hex="0123456789abcdef";

function stov(str){
	var i;
	for(i=0;i<16;i++)
		if(hex.charAt(i)==str)
			return i;
}

function vtos(value){
	return hex.charAt(value);
}

var st_rgb=new Array(3),ed_rgb=new Array(3);
for(i=0;i<3;i++){
	st_rgb[i]=stov(st_col.charAt(i*2))*16+stov(st_col.charAt(i*2+1));
	ed_rgb[i]=stov(ed_col.charAt(i*2))*16+stov(ed_col.charAt(i*2+1));
}
var object=0;
var timer_id=0;

function FadeSt(id){
	if(object || timer_id)
		return;
	object=id;
	count=0;
	df_col=id.bgColor;
	Fade();
	timer_id=setInterval("Fade()",speed);
}

function FadeEd(){
	object.bgColor=df_col;
	object=0;
	clearInterval(timer_id);
	timer_id=0;
}

function Fade(){
	if(object==0)
		return;
	var j,n;
	var color="#";

	for(j=0;j<3;j++){
		n=Math.floor((ed_rgb[j]-st_rgb[j])/(count_max-1)*count+st_rgb[j]);
		color+=vtos(Math.floor(n/16))+vtos(n%16);
	}

	object.bgColor=color;
	count++;
	count%=count_max;
}

//-->
</script>

</head>

あとは、<body>～</body>内の表示したい場所へ、以下の例のように記述します。今回のものは、「<table>」の「<td>」タグ内へidを埋め込む事から始まります。
テーブル内のどこかへ「<td id="適当な英数字を入れて下さい">」を書けば、テーブルのスタイル等は何でもいいわけです。
そして「bgcolor=」で背景色を適当なものにします（例のように、無くても構いません）。リンクに触れたときは、「onMouseover="先ほど指定したID.bgColor='#ffffff'"」の「'」で囲まれた色になり、リンクからカーソルが離れた場合は、「onMouseout="先ほど指定したID.bgColor='#000080'">」で指定した色になるわけです。
ここで注意すべき事は、各リンク毎に違ったIDを指定する必要があるという事です。