• ベストアンサー

セルの背景画像ランダムチェンジがうまくいきません！

過去の質問などを参考にセルの背景画像のランダムチェンジのソースを作りましたがうまく表示されません！何かアドバイスがあれば是非お願いします。 <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が一瞬だけ表示されて、あとはテーブルの背景色になり、何も画像が表示されてず、「×」マーク（画像が見つからなかった場合にでるアイコン）もないのです。 このソースの改良点または、全く違う方法でも結構です、何かアドバイスがあれば是非お願いします。よろしくお願いします！

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

＃１です。 ＃２の方もおっしゃってますが、私もこのソースで動きました。 なので、＃１のような回答をしたのですが、 ＞何も画像が表示されてず、「×」マーク（画像が見つからなかった場合にでるアイコン）もないのです。 少なくともＩＥの場合、パスが間違っていても、背景の場合、「×」マークはでないようです。 なので、多分、パスが間違っているか、アクセスできないのだと思います。 first.gifが一瞬表示されるということでしたので、パスが間違っている可能性は低いと思っていましたが、パスがあやしいと思います。 <img>タグなどで、その画像が、そのパスで表示できるかどうか点検されてみてはいかがでしょうか？ また、セルの表示範囲に画像が無い場合でも、 ＩＥの場合、背景が設定されている場所では、 右クリックから、「名前をつけて背景を保存」で背景が保存できるので、 これで、単に見えないだけなのかどうか調べることができます。

jamslot
質問者

お礼

ご回答有り難うございます。 アドバイスの通りやってみました。どうやら見えないのではなく画像が表示されていないようです。 う～ん、BLUEPIXYさんの環境でも見れたということは、htmlソース全体をもう一度見直す必要がありそうですね。。。

その他の回答 (2)

  • EUR
  • ベストアンサー率61% (29/47)
回答No.2

質問にあったソースでちゃんと動きました。 こちらの環境はＸＰｓｐ２　ＩＥ６です。 背景は元画像の大きさそのままで表示されますので、元画像の大きさ＞セルの場合は、入りきれるところまでしか表示されないはずです。 （実際は左上の方が表示されます） 元画像の大きさ＜セルの場合は、背景が繰り返しで表示されます。 と考えると、たとえば01.gifの大きさがセルよりかなり大きくて、左上の部分は何も書かれていないとか・・・ってないですね。 駄文でした。

jamslot
質問者

お礼

ご回答有り難うございます。 EURさんの環境では問題ないのですね。。。 となると実際のソース内のセルの中身とか違うJSが干渉している可能性もありますね、、、 もう一度ソースとにらめっこしてみます！

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

表示はされているが、セルが小さいので画像が確認できないということはないでしょうか？

jamslot
質問者

補足

早速の書き込みありがとうございます。 テーブルにwidth,height設定（画像サイズと同じサイズにしました）とposition設定をしてみましたが、やっぱりだめでした～

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

関連するQ&A

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

    テーブルの背景を表示のたびに変えたいと思っています。 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> ランダムにならないどころか何も表示されません。 どこがどう間違っているのでしょうか。

  • セルの背景画像の変更

    リンクに触ると背景画像をp15.jpgに変更したいのですが よろしくお願いします。 <table> <tr><td>123</td> <td background="p10.jpg"><a hrf="abc.html">abc</A></td> <td>456</td> </tr></table>

  • オンマウスで異なるセルなどの背景を変える方法

    (1)オンマウスで、オンしているセルではないセルの背景画像を変える方法と、 (2)オンマウスで、セルではなく、テーブル自体の背景画像を変える方法を 教えて下さい。 (1) <table><tr> <td>1111</td>　←このセル(文字)にオンマウスして <td>2222</td> <td>3333</td>　←このセルの背景を変える </tr></table> (2) <table background="*****.jpg"><tr> <td>1111</td>　←このセル(文字)にオンマウスしてテーブルの背景を変える <td>2222</td> <td>3333</td> </tr></table> こちらで使用しているブラウザはSafari2.0.4とFireFox3.0.8です。 お願いします。

    • ベストアンサー
    • HTML
  • javascriptで複数の画像をランダム表示さたいです・・

    お願いいたします！ javascriptで複数の画像をランダム表示さたいのですが。。。 ４行６列のテーブルを使用し、同じ画像が重ならないようにランダム表示をさせたいのですがうまくいきません。。 途中まで出来たものは以下になります───────── <SCRIPT> IMAGES=new Array(); IMAGES[0]="x1.gif";IMAGES[1]="x2.gif"; IMAGES[2]="x3.gif";IMAGES[3]="x4.gif"; IMAGES[4]="x5.gif";IMAGES[5]="x6.gif"; IMAGES[6]="x7.gif";IMAGES[7]="x8.gif"; IMAGES[8]="x9.gif";IMAGES[9]="x10.gif"; IMAGES[10]="x11.gif";IMAGES[11]="x12.gif"; IMAGES[12]="x13.gif";IMAGES[13]="x14.gif"; IMAGES[14]="x15.gif";IMAGES[15]="x16.gif"; IMAGES[16]="x17.gif";IMAGES[17]="x18.gif"; IMAGES[18]="x19.gif";IMAGES[19]="x20.gif"; NUMBER=new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0); document.write("<table border=0><tr>"); var i; var n=0; for(i=0;;i++){ j=Math.floor(Math.random()*24); if(NUMBER[j]==0){ if(n == 4){ document.write("</tr><tr>"); } document.write("<td><image src=\""+IMAGES[j]+"\"></td>"); n++; NUMBER[j]=1; } if(n==20){ break; } } document.write("</tr></table>"); </SCRIPT> ─────────────────────────── 上の物だと１行目は４つのテーブルになるのですが ２行目で残りの画像が１列になっていまします。。。 どうしたものでしょうか。。。 ご教授お願いいたします。

  • リンク付き画像をランダムで。

    色々試してみたのですが、どうも上手くいきません。 どなたかアドバイス頂けたらと、思います。 <TD>ごとにランダムでリンク付き画像を重複せず表示したいのですが、 どの様にしたら良いのでしょうか？ ソースで書くと、 <TABLE> <TR> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> </TABLE> で、８箇所ある各々の<TD>の中に、８つの違うリンク付き画像を表示させたいと思っております。 宜しくお願いします。

  • <tr>の背景画像について

    お世話になっております。 表題のとおりなのですが、 <table width="500px"> <tr style="background-image:url('back.gif');"> として、 back.gifが500pxの画像だとします。 <tr style="background-image:url('back.gif');"> <td>aaaa</td> </tr> と、tdが1つだった場合は問題ないのですが、 <tr style="background-image:url('back.gif');"> <td>aaaa</td> <td>bbbb</td> </tr> とした場合、250pxが2枚繰り返しのような状態になってしまいます。 これを回避し、tdが何個になっても、trの画像を1枚で表示させることはできないでしょうか。 ちなみに、背景画像は500px固定です。短く切ってリピートはできない状態です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • table内画像について

    携帯サイトを作成しているのですが、下記の内容を記述したところ、上下の画像が2px程表示されませんでした。 test1.gifは画像下部分、test2.gifは画像上部分が表示されませんでした。 このような状態はどのような原因があるからでしょうか？ <table width="240" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="test1.gif"></td> </tr> <tr> <td bgcolor="#ffffcc"> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト </td> </tr> <tr> <td><img src="test2.gif"></td> </tr> </td> </tr> </table>

  • jQueryで背景画像を変更したい。

    ブロック要素がありまして（下記<div id="box">boxの中身</div>） そのブロック要素の背景画像(背景は動的に生成)を 別の画像に変えたいと思っています。 ※現行のPCサイトのHTMLをいじらずに、スマホ対応しています 背景画像としては、 現在の背景画像⇒haikei.jpg 新しい背景画像⇒haikei_smp.jpg ↑こんな感じで ファイル名の「haikei」の部分は動的に生成しているため可変ですが、 もとの画像に「_smp」が付く画像ファイルを用意して、 対応したい考えています。 特にイベントはなく、loadしたら読み込む予定でいて 以下のように書いたのですが、 PC上のシミュレーターではうまくいくものの、 実際のスマートフォンで確認したら実行できませんでした。 PC上ではエラーもなかったのですが、 背景画像が変わらないといった不具合です。 HTML ---------------------- <div id="box">boxの中身</div> js ----------------------- $(function(){ 　//mainbgに現在の背景画像を格納 　var mainbg = $("#box").css("background-image") 　 　//mainbgを(".")で分割し、bgImgに格納 　bgImg = mainbg.split("."); 　var img01 = bgImg[0]; 　var img02 = bgImg[1]; 　//「_smp」を付与し、smp_mainbgに格納 　var smp_mainbg = img01 + "_smp." + img02 ; 　//jQueryでbackground-imageを変更操作 　$("#box").css("background-image" , smp_mainbg); }); そもそも、この書き方がよいのか分かりませんが もっとスマートの書き方がありましたら 別の方法でも、どうかご教授ください。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • tableの中のtableの表示と外側（大きい方）のtableに背景画像を表示させる方法

    非常にわかりにくいタイトルで申し訳ありません。tableの中にtableを入れて、外側（大きい方）のtableだけ背景画像を表示させたいのですがどのようにすればいいのでしょうか？下記ソースまでは作ったのですが、中（小さい方）のtableがなぜか右よりになってしまいます。小さいtableを真ん中にして、そのtableの周りを画像で囲みたいのですがどのようにすればいいのでしょうか？もちろん、下記ソースでなくても全然かまいません。htmlはまだまだ勉強中で詳しい方からすれば非常に見難いソースで申し訳ありませんが、ぜひお力添えいただけたらと思いますのでよろしくお願いします。 ↓ソース <html> <head> <body> <title>タイトル</title> <TABLE background="画像jpg"><TD width="10%" height="10%"><TR></TD><TD height="100%"></TD><TD width="100%" height="100%"><TD width="100%"><TD> <TABLE border width="600" height="100%" bgcolor="white"> 　<TR> 　　<TD> 文章 </TD> 　</TR> </TABLE> </CENTER> </body> </html>

  • Firefoxでテーブルの背景画像が表示されない

    下記のようにテーブルに背景画像を表示させたいのですが、 なぜかFirefoxだけ背景画像が表示されません。(WindowsXP,Firefoxは最新版(1.5.0.7)です) IE,OPERA(ともに最新版)では表示されます。 いろいろと検索したのですが同様の相談は見つからず、自分が根本的にミスをしているのだと思いますが、どうしていいのかわからずに相談した次第です。 .tab{width:502px;margin-bottom:20px;} .01{background:url(img/title.gif) top no-repeat;width:502px;height:32px;padding:0px 0px 4px 20px;} .02{background:url(img/com_top.gif); width:502px;height:10px;} .03{background:url(img/com_middle.gif); width:502px;padding:5px 20px 5px 20px;} .04{background:url(img/com_bottom.gif); width:502px;height:10px;} <table cellpadding="0" cellspacing="0" class="tab"> <tr><td class="01">タイトル</td></tr> <tr><td class="02"></td></tr><tr><td class="03"> サンプルテキストサンプルテキストサンプルテキスト </td></tr><tr><td class="04"></td></tr></table> http://www.isonly.net/~second_blue/n/ ↑実際のページです。 汚いHTMLで申し訳ないのですが、解決方法をご存じの方、ご教示下さい。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する