ここから本文です

【至急】JavaScriptの記述について質問です。

a6b********さん

2013/2/619:00:19

【至急】JavaScriptの記述について質問です。

€€
http://javascript.eweb-design.com/1302_bic.html
上記のサイトのSample1を設置したいのですが、
更新をするとデフォルトに変わってしまいます。
そのまま変更させないことはできないでしょうか?

分かる方がいらっしゃいましたら、ご教授お願い致します。

補足すみません。
全力を尽くして色々調べてみたのですが、正直無知で何も分かりません。。
getパラメータとは何のことでしょうか?
よければ教えてください…

閲覧数:
246
回答数:
3
お礼:
500枚

違反報告

ベストアンサーに選ばれた回答

nar********さん

編集あり2013/2/621:45:57

少し面倒な手順になります。
まず、背景の変更はセレクトボックスのonchangeではなく、
画面を開いた際のイベントonloadで行います。
URLのgetパラメータから、背景画像の変更処理を実装してください。

セレクトボックスのonchangeでは、自身のURLにgetパラメータを付加して画面遷移させます。

以上の実装をすれば、更新しても背景画像は維持されます。
(URLに背景画像のパラメータが含まれているため)

[補足]
getパラメータとは、urlの後ろに?をつけて任意の値を引き渡すものです。
値の取得方法などは、以下のurlをご参照ください。
(なお、下のアドレスの場合、t=js〜〜がgetパラメータです。

http://phpjavascriptroom.com/?t=js&p=location4

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

dor********さん

2013/2/818:38:00

サンプル作成してみましたので参考にしてください。

選択されたデータをローカルストレージへ保存して、再度アクセスがあった場合は
保存されたデータをロードして表示するといった処理になってます。
(エラー処理とかは実装してないです・・・。)

ローカルストレージについては以下を参考にしてください。
HTML5で追加された仕様でCookieよりも扱いやすくセキュリティに優れてます。
http://thinkit.co.jp/story/2012/10/18/3752


<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// 背景画像の変更
function chBgImg(opt) {
document.body.style.backgroundImage = "url(" + opt.options[opt.selectedIndex].value + ")";
// ローカルストレージへ選択データを保存
localStorage.setItem("backgroundImage", opt.options[opt.selectedIndex].value);
}

// ローカルストレージから選択データを取得
function loadImage () {
// ローカルストレージから選択済みのデータを取得。
// 存在しない(default)場合は"img1.gif"を表示
var image = localStorage.getItem("backgroundImage") || "img1.gif";
// 選択済みのデータをセレクトボックスに表示して。イベント発火させる。
document.forms[0].select.value = image;
document.forms[0].select.onchange();
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="loadImage()">
<FORM>
<SELECT id="select" onChange="chBgImg(this)">
<OPTION value="img1.gif">四角形1</OPTION>
<OPTION value="img2.gif">四角形2</OPTION>
<OPTION value="img3.gif">円形1</OPTION>
<OPTION value="img4.gif">円形2</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

Bill閣下さん

2013/2/703:17:48

cookieで設定を保存するというテもありますね。
どうせなら背景画像だけじゃなくて
http://www.ktsonline.jp/minatsu/
みたいに、スタイルシート・ファイルごと切り替えられる方がステキだと思うんです。

http://www.usamimi.info/~geko/arch_web/02_sample/018/
にあるCookie保存版が、個人的にオススメです。私のサイトでも、利用してるぐらいです。
サンプルのソースを見ると
<link rel="stylesheet" href="style.css" type="text/css" title="Main">
<link rel="alternate stylesheet" href="style2.css" type="text/css" title="Red">
<link rel="alternate stylesheet" href="style3.css" type="text/css" title="Blue">
とhead要素内にあるのが、スタイルシート・ファイルの指定のタグです。
rel="stylesheet"のやつが、デフォルトのスタイルシートで、
rel="alternate stylesheet"のやつが、代替のスタイルシートです。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる