ポップアップメニューで背景の色が変わるスクリプトです。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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
ColorsRgb=new Array();
ColorsName=new Array();
//1番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[0]='black';
//1番目の色の名前を指定
ColorsName[0]='黒色';
//2番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[1]='gray';
//2番目の色の名前を指定
ColorsName[1]='灰色';
//3番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[2]='silver';
//3番目の色の名前を指定
ColorsName[2]='銀色';
//4番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[3]='white';
//4番目の色の名前を指定
ColorsName[3]='白色';
//5番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[4]='maroon';
//5番目の色の名前を指定
ColorsName[4]='茶色';
//6番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[5]='red';
//6番目の色の名前を指定
ColorsName[5]='赤色';
//7番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[6]='purple';
//7番目の色の名前を指定
ColorsName[6]='紫色';
//8番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[7]='fuchsia';
//8番目の色の名前を指定
ColorsName[7]='ピンク';
//9番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[8]='green';
//9番目の色の名前を指定
ColorsName[8]='緑色';
//10番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[9]='lime';
//10番目の色の名前を指定
ColorsName[9]='ライム';
//11番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[10]='olive';
//11番目の色の名前を指定
ColorsName[10]='オリーブ';
//12番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[11]='yellow';
//12番目の色の名前を指定
ColorsName[11]='黄色';
//13番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[12]='navy';
//13番目の色の名前を指定
ColorsName[12]='紺色';
//14番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[13]='blue';
//14番目の色の名前を指定
ColorsName[13]='青色';
//15番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[14]='teal';
//15番目の色の名前を指定
ColorsName[14]='青緑';
//16番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[15]='aqua';
//16番目の色の名前を指定
ColorsName[15]='水色';
//ポップアップメニューの項目で背景色を変更する
BgFlag=1;
function BgColorChange()
{
iro=document.form1.sele1.selectedIndex;
iro=document.form1.sele1.options[iro].value;
document.bgColor=iro;
}
//-->
</script>
</head>
<body>
<form name="form1">
<select name="sele1" onChange="BgColorChange();">
<option>
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
BgMoji='';
for(i=0; i<ColorsRgb.length; i++)
{
BgMoji='\t<option value="' + ColorsRgb[i] + '"';
if(BgFlag == 1)BgMoji+=' style="background-color:' + ColorsRgb[i] + '"';
BgMoji+='>' + ColorsName[i];
document.write(BgMoji);
}
//-->
</script>
</select>
</form>
・
・
・
</body></html>
[ 解説 ]
色の名前を値を指定する際は、ソース内の解説を元にご変更下さい。
もし実際に使用される色が、16色未満ならば、不要な行を削除します。
1つのデータは、4行で構成されています。
//1番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[0]='black';
//1番目の色の名前を指定
ColorsName[0]='黒色';
ですから削除する際は4行をまとめて消します。
ただし、この時必ず下から削除します。
例えば使用したい色が15色ならば、データの一番下である
//16番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[15]='aqua';
//16番目の色の名前を指定
ColorsName[15]='水色';
を削除します。
同じ要領で、余計なデータを削除して下さい。
色数がもっと多い場合は、減らすのと反対に、4行を増やしてあげます。
//16番目の色の値を指定（色名、もしくはRGB値で）
ColorsRgb[15]='aqua';
//16番目の色の名前を指定
ColorsName[15]='水色';
をコピーペーストして、その真下に付け加えてください。
そして、必ず数字の「15」の部分を1つ繰り上げて「16」にします。
もっと増やすのなら、同じようにコピーペーストして数字部分をどんどん繰り上げて下さい。
また、デフォルトではポップアップメニューの各項目の背景色を彩色されていますが、
この機能を無効にして背景色をカットしたい場合は、上から92行目にある
BgFlag=1;
を
BgFlag=0;
にして下さい。
|
