WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
jbZ

■ JavaScript - サンプル集(257種類) - フォーム
   - 背景色を選択 Ver3(ポップアップメニューで変更)

ポップアップメニューで背景の色が変わるスクリプトです。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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;

にして下さい。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.