- ベストアンサー
tableの背景を毎月変更したい
- ホームページの最上段にtableを置き、table内に背景画像を設定しています。画像を月毎に12枚(img_1.gif～img_12.gif)用意して、カレンダーが変わる毎に表示される背景画像も変更されるようにしたいと考えています。
- 具体的に、これをどのようにしたらできるでしょうか？
- どうか教えてください。
- ok8933
- お礼率46% (7/15)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （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>
その他の回答 (2)
- auty
- ベストアンサー率58% (284/486)
＞＞＞ <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>
補足
本当にありがとうございます。 <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)
・ 訪問したときに、月をチェックする簡単なサンプルを作ってみました。 ・ テーブルは、セルが１つのときと、４つのときのものです。 ・ 画像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>
補足
できました！ 心からお礼申し上げます。誠にありがとうございます。 厚かましいようで恐縮なのですが、関連してあと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のように、ページのヘッダ&フッタのようにもできるのではないかと思いました。 やり方があれば、教えていただけましたら誠に幸いです。 お手間をおかけして恐縮ですが、どうか宜しくお願い致します。
お礼
できました！ 重ね重ね、本当にありがとうございました。 心よりお礼申し上げます。