下のボタンクリックでフォントサイズが変更されます。セットされたCSSの情報はCookieに保存され、リロードしても保持されます。
<div id="demo"></div>
window.onload = function(){styleCtrl.addFSBtn.create("ctrl");}
var styleCtrl = new Object;
/**********************
文字サイズ変更
***********************/
styleCtrl.addFSBtn = new Object;
//----------------------
//文字サイズ変更ボタン put = 出力エリア
//----------------------
styleCtrl.addFSBtn.create = function(put){
//ラベル画像のパス
var labelPath = "images/size_label.gif";
//トリガーのid
var ctrlId = new Array;
//画像のパスを指定
var path = new Array(
"images/size_0_off.gif",
"images/size_1_off.gif",
"images/size_2_off.gif"
);
//Alt テキスト
var alt = new Array("小","中","大");
//文字サイズのパーセント
var size = new Array("80%","100%","120%");
//オブジェクト生成
var ctrl = document.getElementById(put);
var dlist = document.createElement("dl");
var term = document.createElement("dt");
var termimg = document.createElement("img");
termimg.setAttribute("src",labelPath);
termimg.setAttribute("alt","文字サイズ");
term.appendChild(termimg);
dlist.appendChild(term);
var count = 0;
for(var i=0;i<path.length;i+=1){
var img = document.createElement("img");
img.id = "ctrl"+count;
var desc = document.createElement("dd");
img.setAttribute("src",path[count]);
img.setAttribute("alt",alt[count]);
var anch = document.createElement("a");
anch.setAttribute("href","javascript:void(0)");
anch.appendChild(img);
desc.appendChild(anch);
dlist.appendChild(desc);
ctrl.appendChild(dlist);
ctrlId.push(document.getElementById("ctrl"+count));
count += 1;
}
//イベントをセット
ctrlId[0].onclick = function(){styleCtrl.addFSBtn.size(size[0]); chImg(0); setCookie("s");}
ctrlId[1].onclick = function(){styleCtrl.addFSBtn.size(size[1]); chImg(1); setCookie("m");}
ctrlId[2].onclick = function(){styleCtrl.addFSBtn.size(size[2]); chImg(2); setCookie("l");}
//Cookieを取得し値によって画像置換
var theName = 'cname' + "=";
var theCookie = document.cookie + ";";
var start = theCookie.indexOf(theName);
if(start != -1) {
end = theCookie.indexOf(";",start);
theData = unescape(theCookie.substring(start+theName.length,end));
if(theData == 's'){
chImg(0);styleCtrl.addFSBtn.size(size[0]);
}else if(theData == 'm'){
chImg(1);styleCtrl.addFSBtn.size(size[1]);
}else if(theData == 'l'){
chImg(2);styleCtrl.addFSBtn.size(size[2]);
}
}
//フォントサイズ変更ボタン画像置換 current = カレントになる画像id
function chImg(current){
for(var i=0;i<path.length;i+=1){ctrlId[i].setAttribute("src", ctrlId[i].getAttribute("src").replace("_cr.", "_off."));}
ctrlId[current].setAttribute("src", ctrlId[current].getAttribute("src").replace("_off.", "_cr."));
}
//Cookieをセット cookieVal = cookie
function setCookie(cookieVal){
document.cookie = "cname" + "=" + escape(cookieVal);
}
}
//----------------------
//フォントサイズ変更 param = 文字サイズのパーセント
//----------------------
styleCtrl.addFSBtn.size = function(param){
var docRoot = document.getElementsByTagName("body")[0];
docRoot.style.fontSize = param;
}