[HMC]年間5250円で独自ドメイン付属、ウィルスチェックありのレンタルサーバ!
Top
>
JavaScript実験室 Top
Last update : 2001/02/19
リンクに触れたらリンクの色を徐々に変える
▼リンクの色を徐々に変える
▼ソースコード&使い方
リンクの色を徐々に変える
[ Index Page ]
[ JavaScript実験室 Index Page ]
リンクに触れたら、指定した色から色へ徐々にリンクの色を変化させます。
ピコーンピコーン
ソースコード&使い方
まず、ヘッダーの部分に以下のプログラムを組み込みます。
<head> <script language="javascript"> <!-- 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 count=0; var count_max=14; //何回背景を変更させるか var st_col="ffffff"; //開始色 var ed_col="000080"; //終了色 var df_col; var speed=30; //変化の速度(小さい程速い) 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=object.color; Fade(); timer_id=setInterval("Fade()",speed); } function FadeEd(){ object.color=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.color=color; count++; count%=count_max; } //--> </script> </head>
あとは、<body>〜</body>内の表示したい場所へ、以下の例のように記述します。
例 <a href="../index.htm"> <font color="#0000ff" onMouseover="FadeSt(this)" onMouseout="FadeEd()"> [ Index Page ] </font></a> <a href="index.htm"> <font color="blue" onMouseover="FadeSt(this)" onMouseout="FadeEd()"> [ JavaScript実験室 Index Page ] </font></a>
ヘッダー内のプログラム中にある各値をカスタマイズして下さい。
開始色・終了色は、半角英数(小文字)6桁で指定して下さい。
「red」や「FF0000」と言ったような指定は出来ません。