テーブルの背景色が、どんどん変わっていくスクリプトです。
お好きな色設定、また色が変更する間隔も変更する事が出来ます。
IE5以降、NN6以降限定です。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
iros=new Array();
//使用したい背景色を指定する
iros[0]="#ffffff";
iros[1]="#a52a2a";
iros[2]="#6495ed";
iros[3]="#daa520";
iros[4]="#6b8e23";
iros[5]="#fa8072";
iros[6]="#000000";
//背景色が変わる早さを秒数で指定する
//1なら1秒、2なら2秒
my_time=1;
a=0;
kazu=0;
function my_bgcolor()
{
{
if(((document.getElementById) && (!document.all)) || (document.all))
{
if((document.getElementById) && (!document.all))
document.getElementById("lay0").style.backgroundColor=iros[kazu];
else if(document.all)
document.all("lay0").style.backgroundColor=iros[kazu];
kazu++;
if(kazu >= iros.length)kazu=0;
}
}
}
//-->
</script>
</head>
<body onLoad="setInterval('my_bgcolor();',my_time*1000);"><br>
<table border="1" id="lay0" style="position:relative;visibility:visible;">
<tr>
<td>
WEST MiRaのトップページです。<br>全コンテンツに繋がっています。<br>
</td>
<td>
JavaScriptのトップページです。<br>基礎講座とサンプル集があります。<br>
</td>
</tr>
</table>
</body></html>
[ 解説 ]
上から9〜15行目で、色の指定を行っています。
「#fff8dc」や「#faebd7」と書かれた部分が、色の設定になっています。
お好きな色に書き換えてください。
RGB指定だけでなく、カラーネームでの指定も可能です。
使用する色が7つ以下ならば、不要な行を削除してください。
その際、下の方から削除してください。
例えば、サンプルでは色が7色設定されていますが、実際には4色だけ使いたい場合。
以下のようになります。
| 変更前 | 変更後 |
|---|
iros=new Array();
iros[0]="#fff8dc";
iros[1]="#faebd7";
iros[2]="#ffefd5";
iros[3]="#ffebcd";
iros[4]="#ffdead";
iros[5]="#ffdab9";
iros[6]="#f5deb3";
|
iros=new Array();
iros[0]="#fff8dc";
iros[1]="#faebd7";
iros[2]="#ffefd5";
iros[3]="#ffebcd";
|
反対に色を増やしたい場合は、同じ書式で必要な分、色設定の行を増やしていきます。
ただしこの時、一つだけ注意が必要です。
色を設定する行の先頭部分には、数字が着いています。
この数字は、1つずつ繰り上がっていっていますね。
行を増やす場合には、同じように数字を繰り上げていく必要があります。
サンプルでは、現在「6」まで数字が割り振られていますから、
ここから更に1行増やした場合、増やした行の先頭の数字は「7」になります。
では、実際に、どのようになるのか見てみましょう。
サンプルに1つ色を増やす場合、どうなるのか？
以下のソースをご覧下さい。
| 変更前 | 変更後 |
|---|
iros=new Array();
iros[0]="#fff8dc";
iros[1]="#faebd7";
iros[2]="#ffefd5";
iros[3]="#ffebcd";
iros[4]="#ffdead";
iros[5]="#ffdab9";
iros[6]="#f5deb3";
|
iros=new Array();
iros[0]="#fff8dc";
iros[1]="#faebd7";
iros[2]="#ffefd5";
iros[3]="#ffebcd";
iros[4]="#ffdead";
iros[5]="#ffdab9";
iros[6]="#f5deb3";
iros[7]="#ffffff";
|
最後に、色が変わっていく間隔を変える方法ですが、これは上から17行目にある
my_time=1;
の「1」の数字をご変更下さい。
「1」は、1秒間隔で色が変わる設定になっています。
2秒間隔にしたいのなら、「2」と書き込んでください。
1秒より短い間隔で変更したい場合は、小数点以下の数値をご記入下さい。
例えば、「0.5」のように記述してください。
ただし、あまり短い間隔ですと、見にくいどころか目が痛くなりますのでご注意下さい。
テーブル内のセル数などは、お好きなようにカスタマイズしてください。
大きさやセル間の間隔も、ごく普通にご変更下さい。
ただし1行目の
<table border="1" id="lay0" style="position:relative;visibility:visible;">
赤字部分は変更しないでください。
|
