twitter ■お問い合わせ当サイトへのリンクサイト仕様

現在位置 > LostTechnology > JavaScript > My BG Color

My BG Color

このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成しました。

訪れた人がページの背景色を選択できるようになるスクリプトです。指定した色はCookieに30日間保存しているので、30日以内であれば再び訪れたときも指定した色で表示されます。

<script type="text/javascript"><!--
function setBGC(n,v,e) {
	p=location.pathname;
	document.cookie='path = '+p.substring(0,p.indexOf('/',1)+1);
	document.cookie=n+'='+escape(v)+((e == null)?'':('; expires='+e.toGMTString()));
}
function getBGC(n) {
	var s=n+'=';
	if (document.cookie.length>0) {
		o=document.cookie.indexOf(s);
		if (o!=-1) {
			o+=s.length;
			e=document.cookie.indexOf(';',o);
			if (e==-1) e=document.cookie.length;
			return unescape(document.cookie.substring(o,e));
		}
	}
	return null;
}
if (getBGC('BGColor')!=null) document.bgColor=getBGC('BGColor');
var hexStr='0123456789abcdef';
function byteToHex(b) {
	return hexStr.charAt(Math.floor(b/16))+hexStr.charAt(b%16);
}
function hexToByte(h) {
	return hexStr.indexOf(h.charAt(0))*16+hexStr.indexOf(h.charAt(1));
}
function changeColorSub(c,a) {
	c=c+17*a;
	if (c>255) c=255
	else if (c<0) c=0;
	return c;
}
function changeColor(c, a) {
	var expires=new Date();
	var r=hexToByte(document.bgColor.substring(1,3));
	var g=hexToByte(document.bgColor.substring(3,5));
	var b=hexToByte(document.bgColor.substring(5,7));
	expires.setTime(expires.getTime()+1000*60*60*24*30);
	if (c==1) r=changeColorSub(r,a)
	else if (c==2) g=changeColorSub(g,a)
	else if (c==3) b=changeColorSub(b,a);
	document.bgColor='#'+byteToHex(r)+byteToHex(g)+byteToHex(b);
	setBGC('BGColor',document.bgColor,expires);
}
//-->
</script>

<body>直後に上記のように記述しておいてください。BODY要素に背景画像を設定している場合と、スタイルシートで背景色を指定している場合には、このスクリプトは役立ちません。

また、URLが"~user"というようになっていない人は、強調部をdocument.cookie='path = /user/';というように変更してください。もちろん、userというのは利用するURLのうち、一番最後の"/"と"/"で挟まれている部分です。

<table style="font-size:10px;margin:0px;border-style:outset;border-width:3pt;border-color:antiquewhite;">
	<tbody>
		<tr>
			<td>背景色</td>
			<td style="color : white;background-color : red;">R</td>
			<td><a href="javascript:changeColor(1,1);" title="赤を強くします">▲</a> 
			<a href="javascript:changeColor(1,-1);" title="赤を弱くします">▼</a></td>
			<td style="color : white;background-color : green;">G</td>
			<td><a href="javascript:changeColor(2,1);" title="緑を強くします">▲</a> 
			<a href="javascript:changeColor(2,-1);" title="緑を弱くします">▼</a></td>
			<td style="color : white;background-color : blue;">B</td>
			<td><a href="javascript:changeColor(3,1);" title="青を強くします">▲</a> 
			<a href="javascript:changeColor(3,-1);" title="青を弱くします">▼</a></td>
		</tr>
	</tbody>
</table>

これが色変更を行なうためのものです。style属性などは好みに合わせて変えてください。TABLEで指定する必要もなく、重要なのは強調部だけです。ページの好みの場所に用意しておいてください。