• ベストアンサー

テーブルの背景画像をランダムに。

こんばんは。 よく、背景画像がランダムで出てくるのってありますよね。 あれをテーブルの背景では出来ないでしょうか。 <TABLE background="画像のURL">の背景を ランダムにするやつです。 宜しくお願いします。

  • HTML
  • 回答数2
  • ありがとう数3

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

  • ベストアンサー
noname#199778
noname#199778
回答No.2

JavaScriptとスタイルシートを利用すれば実現できそうです。 <script type="text/javascript"><!-- bgImg= new Array(); bgImg[0]="***0.gif"; bgImg[1]="***1.gif"; bgImg[2]="***2.gif"; /* 以上の配列に画像のURIを入れておきます。 これ以上の画像がある場合は、適宜bgImg[x]の数を増やして、それぞれにその画像のURIを上記と同じ要領で入れてください。 */ function bgImgRND(){ if (document.getElementById){ n=Math.floor(Math.random()*bgImg.length); document.getElementById("tb1").style.backgroundImage="url("+bgImg[n]+")"; } } //--></script> 以上のソースをhead内に記述し、bodyタグに「 onLoad="bgImgRND()"」と追記します。 また、背景画像を変えたいテーブルに対して、そのタグ内に「id="tb1"」を追記してください。 これで実現できるのではないかと思います。 一応、こちらではWindowsMe上のIE6、Netscape7.1、Opera7.11で動作することを確認しました。 なお、背景画像をランダムにしたいテーブルが複数ある場合は、このソースをもう少しいじる必要があります。 詳しくは、JavaScriptについて調べてみてください。 上記ソースについてわからない、あるいはうまくいかない場合は、どのようにしてどううまくいっていないのかを補足してくださいね。 参考になれば幸いです。

riroru
質問者

お礼

丁寧なご指導、ありがとうございます! やってみたら出来ました! ちゃんとランダムに表示されました! ソースまで丁寧にかいてくださってどうも、ありがとうございました!

その他の回答 (1)

noname#10926
noname#10926
回答No.1

JavaScriptを使います。 下記のURLが参考になりますよ。

参考URL:
http://www.openspc2.org/reibun/javascript/image/003/index.html
riroru
質問者

お礼

わざわざありがとうございます! 頑張ってみます!

関連するQ&A

  • テーブルの背景画像をランダムに変えるには?

    当方時間が無く非常に困っております。助けてください。 質問はタイトルとおりなのですが、 テーブルの背景画像をJavaScriptでランダムに変えるにはどのように記述すれば良いのか教えてください。 3枚位の画像数で、<table>タグ内のbgimageを変えたいのです。 宜しくお願い致します。

  • テーブル全体に背景画像

    こんにちは。お世話になっています。 ホームページで、テーブル全体に背景画像を貼り付けたいのですが、 <table background=URL>またはCSSで table{background-image: URL;} と指定しても何も貼り付けることができません。 一つのセルにだけ貼り付けるとうまくいくのですが何か原因があるのでしょうか?アドバイスをよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 背景画像がテーブルに透けてしまう

    <body background="画像のURL"> <STYLE TYPE="text/css"> <!-- BODY { background-color: white} --> </STYLE> <Table Border="1" Width="サイズ"> <Tr> <Td ColSpan="サイズ" Align="位置">~ という感じでページを作っているのですが、 背景の画像が透けてテーブルの中の文字が見え難く 困っています。 テーブルの中は「white」で白に指定している つもりなのですが、白になりません。。 このタグでテーブルの中を背景が反映されず真っ 白にする方法ってあるのでしょうか? 調べてみたのですがどうも分からないので教えて下さい。

  • テーブルの背景画像をランダムで表示する

    恐らくJavaScriptだと思うのですが、テーブルの背景画像をランダムで表示するにはどうすればいいんでしょうか? ページ全体の背景をランダムで表示するソースは見つかったのですが・・。

  • テーブルもしくセルの背景をランダムにしたいがうまくいかない

    テーブルの背景を表示のたびに変えたいと思っています。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=171099&rev=1 この記事を参考にしました。 用意している壁紙は7枚で画像ファイルは0~7.gifとしています。 記述するhtmlファイルと同じ階層にhaikeiフォルダを置き、その中に0~7.gif画像を入れました。画像の大きさは200*150で統一しています。 <SCRIPT LANGUAGE="JavaScript"> <!-- var imgback = "haikei/" ; var imgno = (Math.floor(Math.random() * 6) + 1) ; document.write("<TABLE frame=\"void\" cellpadding=\"0\" width=\"200\" height=\"150\" background = ", imgback+imgno ,".gif>"); document.write("<TR><td align=\"center\">hallo!</TD></TR>"); document.write("</TABLE>"); //--> </SCRIPT> ランダムにならないどころか何も表示されません。 どこがどう間違っているのでしょうか。

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

    ホームページを作っていてどうしても うまくいかないことがあるので相談させてください。 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
  • セルの背景画像ランダムチェンジがうまくいきません!

    過去の質問などを参考にセルの背景画像のランダムチェンジのソースを作りましたがうまく表示されません!何かアドバイスがあれば是非お願いします。 <head> <script language="javascript"> var BGimg=new Array(); BGimg[0]="image/01.gif"; BGimg[1]="image/02.gif"; var img_pcs=BGimg.length;//画像の数 var rdm_num=Math.floor(Math.random()*img_pcs);//乱数 function chg_BGimg(){ document.getElementById("changeIMG").style.backgroundImage="url('"+BGimg[rdm_num]+"')"; } </script> </head> <body onload="chg_BGimg();"> <table bgcolor="#333333"> <tr> <td id="changeIMG" style="background-image:url('image/first.gif');">このセルの背景が変わります</td> <td>blank</td> <tr> </table> </body> (実際のテーブルは列11×行9です。) 以上がソースです。どうも初期設定のfirst.gifが一瞬だけ表示されて、あとはテーブルの背景色になり、何も画像が表示されてず、「×」マーク(画像が見つからなかった場合にでるアイコン)もないのです。 このソースの改良点または、全く違う方法でも結構です、何かアドバイスがあれば是非お願いします。よろしくお願いします!

  • テーブルの背景画像のみ透明化

    http://css-happylife.com/archives/2007/0106_1500.php 上記サイトのように、背景画像のみを透過させたいと考えています。 例えば、 body{ background-image : url(./background.png); } table{ filter:Alpha(opacity=70,finishOpacity=70,style=3); } とした場合は、テーブル内の全てのコンテンツが透過されてしまいます。 透過されているテーブルの上に透過されていないテーブルを重ねて表示させる方法もネット上に掲載されていましたが、その場合、上記サイトのように動的にテーブルサイズが変わる場合は、実装が難しいように感じます。 しかし上記サイトでは背景のみが透過されているようです。 スタイルシートを見てみましたが、自分の知識では解析できませんでした。 実現方法を教えていただけると大変助かります。

    • ベストアンサー
    • HTML
  • テーブル背景 (余談です)

    今スタイルシートとHTMLを同時進行で勉強しています。 あるときテーブルに背景画を入れようとして、 head 内の指定とおなじように <table style="background-image: url("・・・");"> としたところ反映されませんでした。あとで調べて <table background="・・・"> 単にこれでよいことに気づき、ちゃんと反映されました。 難しい事をやり始めると、簡単な方法をふと忘れてしまいます。 そこでなのですが、 1.何故 head 内で指定したのと同じようにしても反映されないのでしょうか? 2.何故 一方で「background」「font face」 なのが一方では「background-image」「font-family」だったりするのでしょうか? そういうふうに決まっているので仕方ないのはわかってますが・・。 余談にお付き合いください。

  • cssで背景画像をランダム表示する

    現在cssで背景画像をランダム表示するよう指示をしたいです。 テンプレート配布サイトからDLしたcssには以下のように指定されています。 ---- .menu{ float :left; background-image:url(img/menu_01.png); background-repeat:no-repeat; width :270px ---- このようなcss表記から画像をランダム表示に指定するには どのように加筆、修正をしたらよいのか教えて頂けますでしょうか。 似たような質問もたくさんされていたのでとても申し訳ないのですが、自力で色々試してみたものの、 どうしてもわからなかったので、お力を貸して頂ければ幸いです。 よろしくお願い致します。

    • 締切済み
    • CSS