tableの背景を毎月変更したい

前へ 次へ
このQ&Aのポイント
  • ホームページの最上段にtableを置き、table内に背景画像を設定しています。画像を月毎に12枚(img_1.gif～img_12.gif)用意して、カレンダーが変わる毎に表示される背景画像も変更されるようにしたいと考えています。
  • 具体的に、これをどのようにしたらできるでしょうか？
  • どうか教えてください。
回答を見る
  • ベストアンサー

tableの背景を毎月変更したい

お世話になります、初心者です。 ホームページの最上段にtableを置き、table内に背景画像を設定しています。画像を月毎に12枚(img_1.gif～img_12.gif)用意して、カレンダーが変わる毎に表示される背景画像も変更されるようにしたいと考えています。 [現在の記述] <TABLE border="0" width="800"> <TBODY><TR> <TD align="right" valign="bottom" width="800" background="img_1.gif" nowrap> <FONT>TEXT_1</FONT><BR> <FONT>TEXT_2</FONT><BR> <FONT>TEXT_3</FONT><BR> <BR> <FONT>TEXT_4</FONT></TD> </TR></TBODY></TABLE> 具体的に、これをどのようにしたらできるでしょうか？ どうか教えてください。

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

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.3

上部と下部のテーブルに異なる背景画像を設定してみました。 <html> <head> <script type="text/javascript"> <!-- var mm = new Date().getMonth(); function init(mmx) { var imgFile0 = "img_" + (mmx+1) + ".gif"; var imgFile1 = "img" + (mmx+1) + "-1.gif"; chbckimage('tbl0',imgFile0); chbckimage('tbl1',imgFile1); } function tuki() { ans=prompt("月(1~12)を入力してください",""); if (1<=ans && ans<=12) { init(ans-1); } } function chbckimage(id,img) { if(document.layers) { document.layers[id].background.src=img; } if(document.all) { document.all[id].style.backgroundImage="url("+img+")"; } if(!document.all&&document.getElementById) { document.getElementById(id).style.backgroundImage="url("+img+")"; } } //--> </script> </head> <body onload="init(mm)"> <table id="tbl0" border="0" width="800" style="background-image:url(img_0.gif)"> <tbody> <tr> <td align="right" valign="bottom" width="800" nowrap> <font>TEXT_1</font> <br> <font>TEXT_2</font> <br> <font>TEXT_3</font> <br> <br> <font>TEXT_4</font> </td> </tr> </tbody> </table> <hr /> <table id="tbl1" border="0" width="800" style="background-image:url(img1-0.gif)"> <tbody> <tr> <td align="right" valign="bottom" width="400" nowrap> TEXT0_1 <br> TEXT0_2 <br> TEXT0_3 <br> <br> TEXT0_4 <td align="right" valign="bottom" width="400" nowrap> <font>TEXT_1</font> <br> <font>TEXT_2</font> <br> <font>TEXT_3</font> <br> <br> <font>TEXT_4</font> </td> </tr> <tr> <td align="left"> TEXT3_1 <br> <td align="left"> TEXT4_1 </td> </tr> </tbody> </table> <hr /> <button onclick="tuki();">月の変更</button> <noscript> <hr /> このページではJavaScriptを使用しています。 </noscript> </body> </html>

ok8933
質問者

お礼

できました！ 重ね重ね、本当にありがとうございました。 心よりお礼申し上げます。

その他の回答 (2)

  • auty
  • ベストアンサー率58% (284/486)
回答No.2

＞＞＞　<NOSCRIPT><TABLEbackground=img_13.gif></NOSCRIPT> は、ページの最後でよいと思います。背景画像(img_0.gif)は通年用が良いかもかもしれません。 ＞＞＞　・作ってくださった4つのセル(table id="tbl1")には、別の画像を表示させることもできるのでしょうか？ テーブルのセルには、文字列も画像も表示できます。ただ最近はテーブルでレイアウトをする事はあまり勧められてはいないのですが。 下のサンプルで、ヘッダ&フッタにも背景画像を表示するときは、 id="tbl0" を <table>に戻してみてください。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- var mm = new Date().getMonth(); function init(mmx) { var imgFile = "img_" + (mmx+1) + ".gif"; chbckimage('tbl0',imgFile) } function tuki() { ans=prompt("月(1~12)を入力してください",""); if (1<=ans && ans<=12) { init(ans-1); } } function chbckimage(id,img) { if(document.layers) { document.layers[id].background.src=img; } if(document.all) { document.all[id].style.backgroundImage="url("+img+")"; } if(!document.all&&document.getElementById) { document.getElementById(id).style.backgroundImage="url("+img+")"; } } //--> </script> </head> <body onload="init(mm)"> <table border="0" width="800" style="background-image:url(img_0.gif)"> <tbody> <tr> <td align="center"> <img src="header.gif" /> </td> </tr> <tr id="tbl0"> <td align="right" valign="bottom" width="800" nowrap> <font>TEXT_1</font> <br> <font>TEXT_2</font> <br> <font>TEXT_3</font> <br> <br> <font>TEXT_4</font> </td> </tr> <tr> <td align="center"> <img src="footer.gif" /> </td> </tr> </tbody> </table> <hr /> <button onclick="tuki();">月の変更</button> <noscript> <hr /> このページではJavaScriptを使用しています。 </noscript> </body> </html>

ok8933
質問者

補足

本当にありがとうございます。 <NOSCRIPT><TABLEbackground=img_0.gif></NOSCRIPT>のアドバイス、ありがとうございました。 また、別の画像を表示させるサンプルについては、早速試してみたのですが、画像が重なってしまいました。ブラウザはIE7とFirefox2です。 こちらの補足が言葉足らずで申し訳ありませんでした。伺いたかったのは、こういうことでございました。 例えばページ上部にtable id="tbl0"を、ページ下部にはtable id="tbl1"を配置するとします。 1月には、"tbl0"の背景にimg_1.gifを、"tbl1"の背景にimg_1-1.gifを表示するとき、月が進んで2月になると、"tbl0"の背景がimg_2.gifに、つれて"tbl1"の背景がimg_2-1.gifに変わるようにもできたらいいなと思った次第でした。 面倒なことを再びお尋ねしてしまい誠に恐縮ですが、宜しくお願い致します。

  • auty
  • ベストアンサー率58% (284/486)
回答No.1

・　訪問したときに、月をチェックする簡単なサンプルを作ってみました。 ・　テーブルは、セルが１つのときと、４つのときのものです。 ・　画像12枚(img_1.gif～img_12.gif)は、*.htmlと同じディレクトリに保存してください。 ・　画像が切り替わるのを確認するための[月の変更]ボタンを付けました。 ・　以下のコードを参考にして少しずつ変更してみてください。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- var mm = new Date().getMonth(); function init(mmx) { var imgFile = "img_" + (mmx+1) + ".gif"; // var imgFile = (mmx+1) + ".jpg"; chbckimage('tbl0',imgFile) chbckimage('tbl1',imgFile) } function tuki() { ans=prompt("月(1~12)を入力してください",""); if (1<=ans && ans<=12) { init(ans-1); } } function chbckimage(id,img) { if(document.layers) { document.layers[id].background.src=img; } if(document.all) { document.all[id].style.backgroundImage="url("+img+")"; } if(!document.all&&document.getElementById) { document.getElementById(id).style.backgroundImage="url("+img+")"; } } //--> </script> </head> <body onload="init(mm)"> <table id="tbl0" border="0" width="800"> <tbody> <tr> <td align="right" valign="bottom" width="800" nowrap> <font>TEXT_1</font> <br> <font>TEXT_2</font> <br> <font>TEXT_3</font> <br> <br> <font>TEXT_4</font> </td> </tr> </tbody> </table> <hr /> <table id="tbl1" border="2" width="800"> <tbody> <tr> <td align="right" valign="bottom" width="400" nowrap> TEXT0_1 <br> TEXT0_2 <br> TEXT0_3 <br> <br> TEXT0_4 <td align="right" valign="bottom" width="400" nowrap> <font>TEXT_1</font> <br> <font>TEXT_2</font> <br> <font>TEXT_3</font> <br> <br> <font>TEXT_4</font> </td> </tr> <tr> <td align="left"> TEXT3_1 <br> <td align="left"> TEXT4_1 </td> </tr> </tbody> </table> <hr /> <button onclick="tuki();">月の変更</button> </body> </html>

ok8933
質問者

補足

できました！ 心からお礼申し上げます。誠にありがとうございます。 厚かましいようで恐縮なのですが、関連してあと2点ほど伺っても宜しいでしょうか？ ・<NOSCRIPT><TABLEbackground=img_13.gif></NOSCRIPT>のように、Javascriptに対応しない方のための追記をしたいのですが、どこに入れたらよいでしょうか？ ・作ってくださった4つのセル(table id="tbl1")には、別の画像を表示させることもできるのでしょうか？ それができれば、ページ上部(table id="tbl1")にimg_1.gif、ページ下部(table id="tbl1")にimg_1-1.gifのように、ページのヘッダ&フッタのようにもできるのではないかと思いました。 やり方があれば、教えていただけましたら誠に幸いです。 お手間をおかけして恐縮ですが、どうか宜しくお願い致します。

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

関連するQ&A

  • テーブルを作ったんですが…

    はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>

  • テーブルの隙間をなくす

    テーブルの中に作ったテーブルを一番上に配置したいのですが、どうすれば良いでしょうか？テーブルの下で改行すると上に行くのですが、それだとしたがあまります。 ＨＴＭＬはこれです。よろしくお願いします。 <table width="800" border="0" cellspacing="0" cellpadding="0" height="600"> <tr> <td>　<TABLE width="100%"> <TBODY> <TR> <TD width="241" height="2">　　</TD> <TD width="511" align="right" valign="bottom" style="font-size : 8pt;" height="2">　</TD> </TR> </TBODY> </TABLE> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • テーブルが一行下がる・・・

    HTMLを作成していて、横一列に並べたいのに何故か一行下がってしまいます。 具体的には、 <TABLE width="50" border=1 align=left> <TBODY> <TR><TD noWrap align=middle>項目A</TD> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> </TABLE> <TABLE width="20" border=1 align=middle> <TBODY> <TR><TD noWrap align=middle>タイトル</TD></TR> </TBODY> </TABLE> <TABLE width="50" border=1 align=right> <TBODY> <TR><TD noWrap align=middle>項目B</TD></TR> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> というソースで、「項目A」→「タイトル」→「項目B」と横一線に並べたいのですが、何故か「項目B」が一行下がって表示されます・・・ HTMLを作るのは初めてで、色々と調べたのですがよく分かりませんでした・・・。 どなたか助けてください！！ よろしくお願い致しますm(_ _)m

    • ベストアンサー
    • HTML
  • HTML：：テーブルのセルスペーシング、セルパディングについて

    テーブルについてお聞きします。どうか助けてください。 以下のようなソースがあります。 <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#DED6BF"> <tr> <td><table width="600" border="0" cellpadding="3" cellspacing="1" bgcolor="#DED6BF"> <tr> <td width="150" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話開始時間</strong></font><img src="image/spacer.gif" width="136" height="1"></td> <td width="150" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話終了時間</strong></font><img src="image/spacer.gif" width="136" height="1"></td> <td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話先</strong></font><img src="image/spacer.gif" width="86" height="1"></td> <td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話時間</strong></font><img src="image/spacer.gif" width="86" height="1"></td> <td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>料金</strong></font><img src="image/spacer.gif" width="86" height="1"></td> </tr> </table></td> </tr> </table> 一番左のセル（通話開始時間）の幅は150で、そのセルに透明gifをいれて、テーブルがくずれないようにしています。その透明gifの長さは"136"です。 なぜ透明gifの長さは136なのでしょうか？14を引く理由がわかりません。 テーブルのcellpadding="3"とcellspacing="1"なので透明gifの長さは"143"なのではないでしょうか？

  • tableでレイアウトが崩れる場合

    技術の足りなさからCSSにできなかったので、再度テーブルでサイズを指定してやってみようとしているところです。 どこかの数字がおかしくなっていると思うのですが、どうしてもわかりません。 ちゃんと表示できるブラウザとそうでないブラウザがあり、Firefoxは環境設定により表示が崩れる場合があります。 使用ソフトはビルダーの１１です。 なんでも良いのでどうぞアドバイスをよろしくお願い致します。 <body> <div ALIGN="center"> <table> <tbody> <tr> <td CLASS="td4" HEIGHT="70"> <table WIDTH="600" CELLSPACING="1" CELLPADDING="0"> <tbody> <tr> <td VALIGN="top" CLASS="td1" WIDTH="400" ALIGN="left" HEIGHT="180"> <b>文字 <textarea ROWS="15" COLS="70">文字</textarea><br> <br> </td> <td VALIGN="top" CLASS="td1" WIDTH="100" HEIGHT="180"> <table CELLSPACING="0" CELLPADDING="4"> <tbody> <tr> <td CLASS="td2" HEIGHT="16" WIDTH="100">文字</td> </tr> </tbody> </table> 文字 <br> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div> </body>

    • ベストアンサー
    • HTML
  • テーブルサイズ指定

    こんにちは。 困ったことがあるのですが、 <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170文字</TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TR></TBODY></TABLE> <BR> <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170>文字</FONT></TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TBODY></TABLE> (それぞれの文字の長さは違います。) という２つのテーブルで、 ２つともテーブルの幅が異なるんです。 これを、両方とも同じ幅にすることはできないでしょうか？ 宜しくお願いします。

    • ベストアンサー
    • HTML
  • テーブルだらけのページをスッキリさせたい

    いま、ホームページビルダーで趣味のサイトを作っているところなのですが、 HTMLのことでわからない事があるので教えてください。 現在、大きなテーブルの中にさらに小さなテーブルをいれています。 そのためタグがとてもごちゃごちゃしています。 小さなテーブルはサイト更新の度に追加していく予定なので、 見た目よりデータが重いページになってしまうと思います。 これをなんとかスッキリさせたいのですが 良い方法はあるでしょうか？ スタイルシートを使えばいいのでしょうか？ どのように使用すれば無駄の無い形になるか 具体的なアドバイスをいただけると助かります。 参考までに作りかけのタグを載せました。 悪い部分等があったら、ぜひお願いします。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>サイト名「タイトル未定」</TITLE> </HEAD> <BODY> <CENTER> <TABLE border="0" cellpadding="0" cellspacing="0" width="840"> <TBODY> <TR> <TD colspan="2" align="center" height="40">サイト名　タイトル</TD> </TR> <TR> <TD colspan="2" align="center">サイトの説明と注意事項</TD> </TR> <TR> <TD colspan="2" height="15"> <HR> </TD> </TR> <TR> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#009900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">チューリップ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月1日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#999900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">さくら</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月2日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> </TR> <TR> <TD align="center"></TD> <TD align="center"></TD> </TR> <TR> <TD colspan="2"> <HR> </TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML>

  • 背景画像に任意の位置でテキストを配置する

    CSSで背景画像を読み込み、に任意の位置でテキストを配置するには テーブルでとspace.gifを使ってやるしかないのでしょうか？ もっとスマートな方法はないんでしょうか？ CSS .ac1 { background-image: url(images/index_main01_02.jpg); width: 629px; height: 390px; } HTML <table class="ac1"> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr> <tr><td valign="top">これはテストですこれはテストですこれはテストです</td></tr> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr></table>

    • ベストアンサー
    • CSS
  • Dreamweaverのデザインで表示がおかしい時

    IEだと綺麗に表示されるけど、Dreamweaverのデザインで見ると表示がおかしい時って結構あり困ってます。 ソースフォーマットとかやってもやはり駄目です。 今回の場合、どのタグが悪そうでしょうか？ <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-JP"> </HEAD> <BODY> <BR> <BR> <BR> <TABLE align="center" cellSpacing=0 cellPadding=0 width="95%" bgColor=#0066cc border=0> <TBODY><TR><TD> <TABLE cellSpacing=2 cellPadding=1 width="100%" border=0> <TBODY> <TR bgColor=#0066cc> <TD align=middle><SMALL><B><FONT color=#ffffff> テキストツール </FONT></A></B></SMALL>&nbsp; </TD></TR> <TR bgColor=#ffffff> <TD align=middle> <TABLE height="400" cellSpacing=0 cellPadding=1 width="95%" border=0> <TBODY> <TR valign=top> <TD width="100%" valign="center" align="center"> <BR><A>トップページ</A><BR><BR> </TD> </TR> <TR valign=top> <TD width="100%" valign="top" align="center"> <A HREF="list">あ</A><BR><BR> <A HREF="clist">い</A><BR><BR> <A HREF="slist">う</A><BR><BR> </TD> </TR> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </BODY></HTML>

  • テーブルのセル内で、あるものは上辺寄せあるものは下辺寄せにしたい

    下記のようなソースを表示させた際に 「ＡＢＣ」文字列が、10行でも100行で1000行になっても、 あいうえおのテーブルはvalign=topのようにボーダーの上に常に吸着し、かつ img.gifをvalign=bottomのようにボーダーの下に常に吸着させる方法を 教えてください。 <html> <body> <table border="1"> 　　<tr> 　　　　<td>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ</td> 　　　　<td> 　　　　　　<table border="1"> 　　　　　　　　<tr> 　　　　　　　　　　<td>あいうえお</td> 　　　　　　　　</tr> 　　　　　　</table> 　　　　　　<img src="img.gif"> 　　　　</td> 　　</tr> </table> </body> </html>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する