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で指定する必要もなく、重要なのは強調部だけです。ページの好みの場所に用意しておいてください。