|
訪問者数   
|
|
|
訪問者数
|
        
ご意見・ご感想は メール または myroom の BBS までお願いします。 |
D's Cafe: Kitchen - JavaScriptこのサイトではページ全体の配色の変更やメニュー部分にJavaScriptを使っています。参考までにこれを公開します。 これを応用したい方はご自由にどうぞ。 カラーチェンジ左のメニューのカラーのところをクリックすると、次のskinChange(n)が実行されます。nには1〜8が入ります。
function skinChange(n){
skin_num = n;
styleChange(n);
imageChange(n);
tmp = "Number=" + n + "; ";
document.cookie = tmp;
}
skin_numという変数にnの値を入れておき、styleChange(n)、imageChange(n)を実行します。styleChange(n)はcssファイルの切り替えを行い、imageChange(n)は画像の入れ替えを行います。 その後nをCookieに書き込んでおきます。 これはページ移動やリロード時にそのカラーセットを継承させるためです。 nにはどうせ1〜8しか入らない、ということでescapeかけてません。 いい加減ですね。 styleChange(n)は以下の通りです。
function styleChange(n){
n_css = "sff" + n + ".css";
document.getElementById("link_id").href = n_css;
}
CSSファイルを読み込むためのLinkタグにlink_idというIDを付けておき、そのhrefをsffn.cssにしています。imageChange(n)は以下の通りです。
function imageChange(n){
m = Math.ceil(n/4);
l = n % 4;
title_img = "img/title" + m + ".png";
menu_img = "img/menu" + m + ".png";
color_img = "img/color" + m + ".png";
btn_img = "img/btn" + l + "/" + btn_name[page_id] + ".png";
btn_id = "btn" + page_id;
document.titleimage.src = title_img;
document.menuimage.src = menu_img;
document.colorimage.src = color_img;
document.images[btn_id].src = btn_img;
}
mにはn=1〜4(背景: 黒)の時に1が、n=5〜8(背景: 白)の時に2が入ります。lにはnを4で割った余りが入ります。 タイトル画像などは背景の色に合わせ画像を切り替えます。 lはメニューボタン(のうちの1個)の色を決めるために使っています。 ここでは遊び用にやってみただけなのですが、実際に色のついた(特に背景に濃い色を使ったページ)では、印刷する時などに面倒なことになることがよくあります。 そういう時にCSSの切り替えで一つのhtmlファイルで表示用と印刷用ページが出来ると何かと便利かもしれません。 メニューボタンまずはお手軽な画像のロールオーバー。いろいろなサイトで見られるやつで、ここで解説するものでもないのですが。
var btn_name = new Array(8);
btn_name[0] = "home";
...中略...
btn_name[7] = "myroom";
function btnWhite(n){
btn_id = "btn" + n;
btn_img = "img/btn5/" + btn_name[n] + ".png";
document.images[btn_id].src = btn_img;
}
function btnBlack(n){
btn_id = "btn" + n;
btn_img = "img/btn4/" + btn_name[n] + ".png";
document.images[btn_id].src = btn_img;
}
function btnColor(n){
l = skin_num % 4;
btn_id = "btn" + n;
btn_img = "img/btn" + l + "/" + btn_name[n] + ".png";
document.images[btn_id].src = btn_img;
}
最初にbtn_nameという配列を作って、中身を書き込んでおきます。btn_idにボタン画像に付けられたIDを、btn_imgに画像ファイルを指定し、画像を変更しています。 HTML中で
img src="img/btn4/home.png" id="btn0"
onclick="btnColor(0)"
onmouseout="btnBlack(0)"
onmouseover="btnWhite(0)"
のようにして実装します。ただロールオーバーするだけであれば
onmouseove="btn0.src='画像ファイル'"
などとしてもよいのですが、今回はカラーセットが変わるとonclick時のファイルも変わってしまうので、
JavaScriptの関数にしておきました。次にメニューボタンの移動について。 うっとうしいだけかもしれませんが、この程度のことならJavaScriptで充分できますよ、ということで。 この関数は左上の"〜Menu〜"という画像にも組み込んでいて、そこをクリックしてもボタンが動きます。
var n_btn, x, init_x, dest_x, step, y, timerID;
function menuAction(){
clearTimeout(timerID);
init_x = new Array(-80, 144);
dest_x = new Array(0, 64);
step = new Array(4, -4);
y = new Array(0, -112);
for (i = 0; i <4; i++){
btn_id = "btn" + i * 2;
document.getElementById(btn_id).style.left = init_x[0];
document.getElementById(btn_id).style.top = y[0];
btn_id = "btn" + (i * 2 + 1);
document.getElementById(btn_id).style.left = init_x[1];
document.getElementById(btn_id).style.top = y[1];
}
n_btn = 0;
x = init_x[0];
moveButton();
}
まず、移動するボタンのx座標の始点と終点、移動幅、y座標(固定)を指定します。ボタンは左右2列で配置しているので、配列を使っています。 すべてのボタンを初期の位置に移動させ、初期設定終了後にmoveButton関数を実行します。
function moveButton(){
m = n_btn % 2;
if(x == dest_x[m]){
n_btn += 1;
x = init_x[1-m];
}
if (n_btn > 7){
clearTimeout(timerID);
}
else{
x += step[m];
btn_id = "btn" + n_btn;
document.getElementById(btn_id).style.left = x;
timerID = setTimeout("moveButton()", 10);
}
}
moveButton関数では、まず今動かしているボタンが終了位置にいるかを判定し、それが真であれば次のボタンの移動に移ります。終了位置に到達していなければxを変化させ、画像の位置を移動させます。 setTimeoutによって、指定時間後に再度moveButton関数を実行し、移動を繰り返しています。 ページ起動時そしてページを起動した時にbodyタグのonloadハンドラで以下のpageOpen関数を実行しています。
function pageOpen(n){
page_id = n;
tmp = document.cookie;
if (tmp == ""){
skin_num = 1;
tmp = "Number=" + 1 + "; ";
document.cookie = tmp;
}
else{
skin_num = tmp.substr(7);
skinChange(skin_num);
}
}
ただ単にCookieを読み込んでskinChange関数を実行し、ボタンの画像をプリロードしているだけです。しかもCookieには"Number=n"としか書かれていないので、読み方も相当いい加減です。 とりあえず動けばいいんです(笑) |
