• ベストアンサー

URLごとに背景画像を変更したい

現在CMSを使ってEC サイトを構築しています。 質問なのですが、全て1つのテンプレートファイルの<body>タグから、背景画像を読み込んでいるページ対し、URLによって、複数の背景画像をページ読み込み時に変更させたいのですが、どのようにすればよいか分かりません。 あまり、javascriptに関して詳しくないのですが、 document.getElementById()？？？～～を使ってBODYタグにidを指定すれば良いのか、何なのか手も足も出ない状態です。 対処方法をご存じの方はいらっしゃいますでしょうか？ 宜しく御願いいたします。

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

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

> どのようにプログラミングを勉強していけば良いのか > アドバイスを頂きたいです(><) 私の場合は学生時代から好きで始めた事なんで、必要に迫られている人がどうすすめていけばいいかはわからないんです。 ただ、こうした場所で回答する人にも、 きちんと相手の為を思って安易に答えを出さない人、 私のようにヒマつぶしのパズルのように答えだけを書く人とか、 色々居ますので、 質問する時に勉強中である事、答えぢゃなくヒントだけ下さい、とかことわりを入れておくと、安易に答えにたどり着かず、また、 それなりに説明を加えてくれる人とかも居て、 より身に着くようになるかも。です。 HTML・CSSはマスター済みという事で、 同時に全部始めなきゃいけない人、 プログラム方面から逆にデザインの方に入った人よりはかなり優位に立っているのでがんばってください。

nonchan000
質問者

お礼

有り難うございます。 全て最初から相手に答えを求めるのではなく、 ヒントをもらって、自分から答えを求めていく姿勢というのは、 学ぶという上で大切にしなければいけない事だと思います。 ただ現状社内では、１つの案件に対して、デザインラフ作成、HTML制作、クライアントとのやり取り・打ち合わせ、プログラミングまで全ての制作業を１人でまかなってやっている状況です。 WEB制作を仕事として本格的に初めてまだ３ヶ月なのですが（汗） その割には、他の受注案件がどんどん入ってきて、プレッシャーをかなり感じます。 又、WEBに関する知識をもつ人員が社内にほとんどいない為、 会社的にも理解しようとしてくれているのだとは思うのですが、 なぜ難しいのか、この状況がなぜ大変なのかを 本当の意味で理解してもらうには厳しい現状なのです。 ですので、分からない時にプログラミングについて 聞けるこのようなサイトはかなり助かっていますし、 分かってくれている人がちゃんといるんだという安心感も得られます。 有り難うございます。 これが「WEB屋」と世間的に言われている人間の現状なのでしょうか？？ ただ、全ての作業を１人で負うというのは、責任的にも大変なことですが、 良く言えば全てを１人で貪欲に学んでいける環境だとも言えます。 この状況を１つ１つクリア出来れば、いつの間にか高い所にいけるのかなあと、軌道に乗るまで今はがむしゃらに頑張っていこうと思っています。 有り難うございました。

その他の回答 (1)

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

サンプルです。 sample1.htmlという名前で保存すればbodyのidがID1となり、 背景が赤に、 sample2.htmlという名前で保存すればbodyのidがID2となり、 背景が青に、 sample3.htmlという名前で保存すればbodyのidがID3となり、 背景がピンクになります。 <html> <head> <title></title> <style type="text/css"> body#ID1 { background-color:red; } body#ID2 { background-color:blue; } body#ID3 { background-color:pink; } </style> </head> <body> <script type="text/javascript"> var urlId = { 'sample1':'ID1', 'sample2':'ID2', 'sample3':'ID3' }; for(x in urlId){ if(location.href.match(x)){ document.body.id = urlId[x]; break; } } </script> <h1>さんぷる</h1> </body> </html>

nonchan000
質問者

お礼

有り難うございました。 動作を確認したところ、見事にしたかったことが実現できました。 現在javascript、php、MYSQL等を独学で勉強しているのですが、 元々デザイナーなもので、HTML・CSSはマスターしたものの、 プログラマーへの道へ進むのが難しく日々奮闘しています。 もし宜しければどのようにプログラミングを勉強していけば良いのか アドバイスを頂きたいです(><) 本当に有り難うございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • on(press)で背景画像変更

    最近Flashをはじめた者ですが、調べてもなかなか出てこないので、 質問させてください。 Flash上でにボタン設置して、 クリックすると背景画像が変わるようにするには どう記述すればよいでしょうか？ JavaScriptでいう、 onClick=document.body.style.backgroundImage='url(画像名)'; にあたる記述ということなのですが。

  • 背景画像のＵＲＬとは？

    今、ＨＴＭＬを使ってサイトを作っています。 サイトの背景に画像をつけたいのですが、タグの中に背景画像のＵＲＬを入れてくださいと出ました。（講座っぽいところでコピーして作ってます） 背景画像のＵＲＬのｕｒｌとは何のことでしょう？ 画像を右クリしてプロパティを出しても、ＵＲＬらしきものは出ません。 ＵＲＬの出し方、どこにあるか等知っている方、出来れば専門用語抜きで教えていただけませんでしょうか？

  • 画像を背景に

    aimewでHPを作っていて困ってます。 PCから見ると真ん中に色の背景があってページなど があるんですけど、真ん中以外に壁紙をはりたいんです。 bodyのタグを使ったんですけど、表示されません。 で、編集のところをみるとbodyのタグが消えています。 画像を背景にする場合どうしたら表示されますか？

  • センスがいい背景画像を探しています！！

    テンプレートのタグ等の HTML codeではなくて、 Image URL：（ http://www.・・・・・・・）から始まるのが 載っていて、センスのいい背景画像を探しています。 シンプルで、背景は真っ白に上の方に綺麗な花が1個あったり、（↓こんな感じだったり） http://hwpbc.gate01.com/sugar1225/template/flower5.html ジュエリー系で、シンプル系↓ http://hwpbc.gate01.com/sugar1225/template/jewely1.html のような、センスがよくて可愛らしくくもあり、シンプルな背景画像を探しています。 宜しくお願い致します。

  • テーブルの背景色を複数変更する

    テーブルにて、onMouseOverで背景色を変え、 onMouseOut にて背景色を戻すスクリプトを作っています。 セル一つならば変更できますが、複数のセルに依存関係があり、依存関係があるセル同士はそのセルにマウスオーバーされると依存関係があるセル全ての色を変更したいと思っています。 いろいろと探しているのですが、見つかりません。 以下のようなサンプルで 1 と 4 が一緒に変更できないものでしょうか。 よろしくお願いします。 <html> <head> <title>テーブルの色を変える</title> <script language="JavaScript"> <!-- // b_color(idname,cn); // 背景色を変える // idname: 色変更したいタグid； // cn：色変更法 function b_color(idname,cn) { // alert(idname); // debug alert if (document.getElementById) { document.getElementById(idname).style.backgroundColor = cn; }else{ // alert("あなたのブラウザには対応しておりません。"); } } if (! document.getElementById) { document.write("あなたのブラウザには対応しておりません。マウスを動かしても色は変えられません。<br>"); // マウス移動でいちいちalertが出ると煩わしいので、最初に表示しておく } //--> </script> </head> <body> <table border="1"> <tr> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ１</td> <td>ここ２</td> </tr> <tr> <td>ここ３</td> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ４</td> </tr> </table> </body> </html>

  • アイフレームからトップページの背景画像を変更

    検索したものをいくつか試してみましたが、 いずれも上手くいかなかったので質問させてください。 トップページ(index.html)に埋め込まれているアイフレームから トップページの背景画像を変更したいです。 ----------------------------------------------------------------- <script type="text/javascript"> <!-- function bgChange(myback){ top.document.body.background=myback; } //--> </script> <span onClick="javascript:bgChange('img.jpg');return false">背景を変更する</span> ----------------------------------------------------------------- それと、親ページを指定する単語は『top』で合っていますでしょうか…？ よろしくお願い致します。

  • グラデーション背景と画像固定背景

    こんにちは。 ホームページ作成初心者の者なのですが、ページの背景をグラデーション背景の上に固定した画像背景を乗っけようと考えているのですが、グラデーション背景のタグを入れると画像背景のタグが無効になってしまいます。この二つを同時に有効にする事は不可能なのでしょうか。 ちなみにタグは <HEAD> <STYLE> <!--BODY { background-image : url(back2.gif) ; background-repeat : no-repeat ; background-position : 90% 90% ; background-attachment : fixed ;} --> </STYLE> <STYLE> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#68b4ff',endcolorstr='#ffffff',gradienttype='1') } --> </STYLE> （省略） </HEAD>

  • 背景画像にリンク

    背景に画像を固定して表示したページに、リンクを貼りたいのです。 フレームページで縦に２分割、左のページにスタイルシートで背景固定、BODYタグ内には何もなし、右のページも同じくスタイルシートで背景固定、こちらに左のページの背景画像内にある文字からリンクを貼り、そのリンクをはったページを右ページ内に反映させたいのです。 一枚の大きな画像を２分割して左と右のページでそれぞれ固定しているので、IMGタグはなるべく使いたくありません。 （IMGタグでスタイルシートでの背景固定ように、right bottomと出来るのならば全く問題ないので、その場合は教えてください＾＾；）

  • テーブル背景を毎日入れ替える方法

    以前ここで同様の質問させていただいた者です。 回答いただいた例を参考にして、自分なりに設定を直してみたのですが動かない状態です… もう一度ご教授をお願いします。 テーブルの背景画像を日によって変更できるように、と思っています。 tableタグ内は、以下のようにしました。 <table id="BACKIMG" ～中略～ style="BORDER: #7B7B7B 1px solid; background-image:url('image/tableback.jpg');"> またJavaScriptは外部ファイルにして 【Change.js】の内容↓ function fncChange() { var a; var date = new Date(); var d = date.getDate(); a = d % 7; if (a==0){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images0/top.jpg)"; }else if (a=1){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images1/top.jpg)"; }else if (a=2){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images2/top.jpg)"; }else if (a=3){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images3/top.jpg)"; }else if (a=4){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images4/top.jpg)"; }else if (a=5){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images5/top.jpg)"; }else if (a=6){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images6/top.jpg)"; } } 使用する画像はフォルダで分けるつもりです。 HTMLにはHEADタグの間に <SCRIPT language="javascript" src="Change.js"> <!--// fncChange(); //--> </SCRIPT> を記述しています。 これで不足してる部分がありますでしょうか？ 解決策をよろしくお願いします。

  • 画像をクリックしてディレクトリを変更したい

    Javascriptの知識はまったくないのですが、日本語のページと英語のページを双方行き来出来るようにしようと、色々調べて以下を使うと出来るという所まで辿り着きました。 <span id="link">(※)</span> <script language="JavaScript"><!-- url=window.location+""; url=url.replace("http://aaaaaaa.com/","http://aaaaaaa.com/en/"); document.getElementById("link").innerHTML="<a href=\""+url+"\">英語ページへ</a>"; --> </script> このままだと希望通りの動きをするのですが、これの「英語ページへ」の部分を画像にすると、画像は表示されず、Javascriptをオフの時に表示させるメッセージ部分が表示されてしまいます。 テキスト部分を以下に置き換えましたがダメでした。 <img src="http://aaaaaaa.com/images/language/jp.png"/> どうすれば画像を表示し、クリックしてディレクトリを移動する事が出来るのでしょうか？ よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する