• ベストアンサー

背景画像の変更と保存

1.プルダウン(セレクト)メニューで画像名を選択すると、背景画像が変更できる 2.背景画像によって、配置位置を指定できる(右上固定/全面に繰り返し表示等) 3.ブラウザを閉じて開いても、選択した画像が背景に表示される 下記がイメージに近いのですが、2と3の機能がありません。 http://www2s.biglobe.ne.jp/~club_tom/java-kouza/sample/ha/ha-no5_2/ha-no5_2.htm 再現できるスクリプトを紹介して頂けると助かります。宜しくお願い致します。

noname#38724
noname#38724
  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

ちょっと古いブラウザでは動作しません。 Mac版ブラウザでの動作は未検証です。 <html> <head> <script type="text/javascript"> <!-- var CookieName = 'backgroundInfo'; function set_bg(Value) { document.body.style.background = Value; save_cookie(Value); } function save_cookie(Value) { var d = new Date(); d.setTime(d.getTime()+24*60*60*1000*30);//cookieの保存期間30日 document.cookie=CookieName + '='+escape(Value)+'; expires='+d.toGMTString(); } function load_cookie() { var m=(" "+document.cookie).match((new RegExp(" "+CookieName+"=([^\\s;]+)","g"))); return (m==null?null:unescape(RegExp.$1)); } function backgroundInit(SelectId) { var Value = load_cookie(); var Sel = document.getElementById(SelectId); if(Value) { set_bg(Value); for(var i=0;i<Sel.length;i++) Sel.options[i].selected = (Sel.options[i].value == Value); } else { set_bg(Sel.options[Sel.selectedIndex].value); } } //--> </script> </head> <body onload="backgroundInit('bg')"> <select id="bg" onchange="set_bg(this.value)"> <option value="#ffffff url(img/bg13d.gif)">abc</option> <option value="#eeeeee url(img/bar.gif) repeat-x" selected>def</option><!-- 初期値にはselectedを付ける--> <option value="#ffeeff url(img/cow.jpg) no-repeat top right">ghi</option> </select> </body> </html>

noname#38724
質問者

お礼

ソースありがとうございました。理想通りのスクリプトです。 …が、実はMac9.2(とIE)を使用していまして;、少し動作に問題がありました。画像変更・表示位置・クッキー自体には問題がないのですが、セレクトで選択した直後は部分的にしか画像が表示されません(全面表示等に関わらず)。リロードしても100%は反映されず1/3くらいの確率で正常(指定位置)に表示されました。IE特有の現象だと思うのですが…。

その他の回答 (1)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

質問時に例示されているサンプルでは問題おきませんね? そのサンプルに書かれていたMAC IE向けの例外処理を足してみてください。 function set_bg(Value) { document.body.style.background = Value; //以下を追加 if (navigator.userAgent.indexOf("Mac")!=-1 && navigator.appVersion.indexOf("MSIE 5")!=-1) { window.resizeBy(0,-1); window.resizeBy(0,1); } //ここまで追加 save_cookie(Value); } これで治らなければ私にはちょっとわかりません。

noname#38724
質問者

お礼

理想通りの表示になりました。重ね重ね、ありがとうございました。

関連するQ&A

  • 同時にフレームの背景色を変える

    http://www2s.biglobe.ne.jp/~club_tom/で配布されている背景 No.1.1(http://www2s.biglobe.ne.jp/~club_tom/java-kouza/sample/ha/ha-no1_1/ha-no1_1.htm)を使用しています。 2分割つしたフレーム(AとB)のAフレームに上記のスクリプトを設置し、カラーパレットクリックでAとBのフレームの背景色を変更したいと思っているのですが、カスタム方法が解りません。御教示頂けると助かります。 または、カラーパレット(のようなもの)をクリックで、複数のフレームの背景色を変更出来るスクリプトをさがしています。宜しくお願い致します。

  • 背景画像と背景色変更:JavaScript

    下記のページのような背景画像変更スクリプト(サンプル画像をクリックで反映される)と… http://www.sky.sannet.ne.jp/masapine/java_back6.html CLUB とむやん君(http://www2s.biglobe.ne.jp/~club_tom/)背景 No.1.1の背景色変更スクリプトを同一のページで行ないたいのですが、その組み込み方がわからず困っています。お力を貸して頂けると助かります。宜しくお願いします。 ※背景色変更ソースを記述したかったのですが、字数オーバーで投稿できないため省いてます…。補足回答でソースを載せられれば…と思っています; またCLUB とむやん君のサイトは閉鎖されてしまったのでしょうか?。

  • ポイントで出るメッセージ

    リンク部分にマウスを持っていくとメッセージが出るプログラムで、 スタイルシートで固定した中に表示するものは見つけました。 たとえば http://www2s.biglobe.ne.jp/~club_tom/java-kouza/ja-index.htm の http://www2s.biglobe.ne.jp/~club_tom/java-kouza/sample/mes/mes-no5_2/mes-no5_2.htm のようなものですが これを、どの大きさのウインドウやどの解像度のブラウザから見ても メッセージを固定位置に表示させることはできないでしょうか? スタイルシートで固定したところに表示だと ピクセル指定でも%指定でも、ウインドウの大きさを変えるとやっぱりちょっとずつ見え方が違ってしまうのです。 ページ全体をガチガチにスタイルで固めてしまうとできるのかもしれませんが・・・ できればテーブルの中に表示させるとか、スタイルで固めてないページの中にも使える形がいいのですが・・・ わがままですみませんがよろしくお願いします。

  • ソースのどの部分を変更すれば・・・

    Club とむやんさんのページでハイパーリンクというのがありまして11番の画像の部分にメニューがでます。というのを使いたいのですが、サンプルは、画像が横に置いてるんですが、この画像を縦に並べたいのです。ソースのどこのどの部分を変更すればできるのか教えて頂けたらうれしいのですが、宜しくお願いします。 http://www2s.biglobe.ne.jp/~club_tom/java-kouza/ja-index.htm

  • マウスカーソルに画像が追っかけてくる

    マウスカーソルに画像が追っかけてくるのを時々見かけます。 自分のページでも試してみましたがうまくいきません。 1つだけのページでは動作しましたが、フレームを使用しているため、別フレームにいくと切れてしまいます。 この「カーソルを画像が追っかけてくる」をフレームを越えて適用する方法はありませんか? ○使用したプログラム http://www2s.biglobe.ne.jp/~club_tom/java-kouza/ja-index.htm ↑ここの「お遊び」→3.2「マウスカーソルを動かすと画像が付いて来ます。」です。 大小5個の☆の画像があり、大の☆マーク→小の☆マークとカーソルに付いて来ることで、流れ星のように見えるというものです。 フレームを設定するだけのファイルに載せてみましたがダメでした。 全フレームにプログラムを載せると表示した時にすべてのフレームに☆が表示されてしまいます。 どなたかご存知の方、参考URLでもかまいませんのでよろしくお願いします。

  • 指定した「曜日」の「時刻」に違うHTMLを表示させるプログラム

    いつもお世話になっております。 指定した「時刻」または「曜日」または「日付」に 違うHTMLを表示させるプログラムならば ↓のサンプルプログラム「時計」の5.で出来るのですが http://www2s.biglobe.ne.jp/~club_tom/java-kouza/ja-index.htm これを欲張って 指定した「曜日のさらに違う時刻」に 表示させるプログラムは無いでしょうか。 じっくり勉強する時間はないので フリーのサンプルプログラムや 上記の改造方法を教えていただければ 本当に助かります・・・ よろしくお願いします m(_)m

  • 「画像の上を流れる文字列」をこんな風に表示する事は可能ですか?

    以前、この欄で「画像の上を流れる文字列」の作り方を教えて頂きました。 お陰様でうまくできました。・・・のですが、さらに下記の様な事って、可能なのかどうか教えて頂きたくて、質問しました。 それは、 サンプルでは、「1行目の文章が右から左に流れ、その1行目の文章が完全に見えなくなってしばらくしてから、2行目の文章が右から現れる」のですが、それを、「1行目の文章が完全に見えなくなる前に次の2行目の文章を表示させたい」という事です。つまり、1行目の文章の後に少し空白を入れて2行目が出てきて、2行目のあとにも空白が少し入って、3行目が出てくる・・というように、「途切れさせずに次々と文章が出てくるように」したいのです。 参考HPでは、JSとレイヤーが使われているのではないかと思うのですが、(自信がありませんが)どこを変えれば上記の様になるのか、判りません。 それとも、こんな動作はもともと出来ないのでしょうか? 当方、JSはもちろん、レイヤーとはどう言う物なのかも、いまいち、よく判からないのですが、どなたか、上記のような事が可能なのかどうか、教えてやってください。よろしくお願いします。 参考にさせて頂いたHP http://www2s.biglobe.ne.jp/~club_tom/java-kouza

  • 背景画像の設定について

    ホームページビルダー8を使っています。 背景画像にしたい画像があって、「壁紙」で設定しても、 その画像が横に縦に連続して表示されるか、 真ん中に1つだけ表示されます。 これを右上にだけ表示するにはどうすれば いいのでしょうか? よろしくお願いします。

  • ☆背景画像を2箇所に固定☆

    異なる背景画像を、ウィンドウの 右上と左下に、それぞれ固定表示 させる方法って、ありませんか?? 1箇所に固定するCSSなら、 検索で見つけたんですけど。 それの右上用と左下用を 一緒に使っても駄目でした☆ やはり、壁紙には1つの画像しか 使えないものなのでしょうか…

    • ベストアンサー
    • CSS
  • 任意のテーブルのみに背景画像を設置して、時間ごとに変更するには?

    ホームページを作っていてどうしても うまくいかないことがあるので相談させてください。 1ページの中に複数のテーブルがあるのですが、 そのうちの一つだけに背景画像を設置して、 尚かつ時間ごとに画像を変更したいのですが、 うまくできません。 BODYの背景を変える場合は、JAVAスクリプトで できたのですが、任意のテーブルのみに同じような ことをすることはできないのでしょうか。 いくつか試したのですが、例えばCSSを用いて、 <style type="text/css"> <!-- .timg{ background-attachment: scroll; background-image: url(img/001.gif); background-repeat: no-repeat; background-position: center; } --> </style> としておき、任意のテーブルタグにて <table class="timg"> とすることで、任意のテーブルのみに 背景をつけるとこまではできたのですが ここからJAVAスクリプトで背景を時間ごとに 変えるやり方がわかりませんでした。 どうかアドバイスよろしくお願いします。

    • ベストアンサー
    • HTML