• ベストアンサー

CSSレイアウトとJavascriptの連動について質問なのですが…

過去の教えてgooの記事より見つけたJavascriptのテーブルの背景画像がランダムに変わるスクリプトを使用しています。 <script type="text/javascript"> wall = new Array(); /* 使用する背景画像を好きなだけ記述 */ wall[0] = "aaaaaaaaaaaaaaa.jpg"; wall[1] = "bbbbbbbbbbbbbbb.jpg"; wall[2] = "ccccccccccccccc.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">ontline { background-image:url(' , wall[rnd] , '); }</style>'); </script> ＣＳＳレイアウトに変更したところ背景が表示されません。 CSSのOutline部分(<div id="outline"></div>)に表示させようとしたのですが、エラーが起こりレイアウトが崩れてしまいます。 JavaとＣＳＳはどうしたら連動させる事ができますでしょうか？ ぜひ教えてください。

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

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

  • ベストアンサー
  • k0021
  • ベストアンサー率26% (32/120)
回答No.3

>過去の教えてgooの記事より見つけたJavascriptのテーブルの背景画像がランダムに変わるスクリプトを使用しています。 変更前のJavascriptの状態に戻してください 注　質問内容により作成したCCCは、全て削除して下さい。 >ＣＳＳレイアウトに変更したところ背景が表示されません。 <body>を<BODY onload="getInfo;">に変更 <script type="text/javascript">の下にfunction getInfo();を追加 私が同じ作業したときたしか上記回答同じ作業をした記憶しています。 以上・

go_and_goes
質問者

お礼

お礼が遅れてすみませんでした。 ご回答有難うございます。 function での方法もあるのですね。 参考にさせていただきます。

その他の回答 (2)

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

#1>ＣＳＳ内のOutlineの部分に「 background-image:url(' , wall[rnd] , ');」を入れるとレイアウトが崩れてしまいます。 wall[rnd] は、スクリプトで作られた変数ですので、ＣＳＳ記述の中にスクリプトの記述を埋め込むことはできません。 質問文の中のスクリプトでは、スクリプトによってスタイルシート記述を書き出しているので、更にＣＳＳで記述する必要はありません。 スクリプトで（CSS記述を書き出すのでなくて）全部やろうとするなら、style プロパティでスクリプトから設定することになろうかと思います。

go_and_goes
質問者

お礼

お礼が遅れてすみませんでした。 ご回答有難うございます。 wall[rnd] も変数になるんですね。 style プロパティからの方法、参考にさせていただきます。

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

これだけではなんともいえません。 提示されたソースは間違いがいくつかあるけど、これはコピペしないで手打ちしたミスですよね？ もし実際のソースからコピペしたものなら以下の点を修正してみてください。 document.write('<style type="text/css">ontline {～ ↓ document.write('<style type="text/css">#outline {～ ただ、この間違いだけでは背景画像が表示されなくなるだけで、javascriptのエラーが起きたりレイアウトが崩れる原因にはならないはずです。 やはり再現できる程度のソースを補足してもらわないとこれ以上の原因探しは難しいです。

go_and_goes
質問者

お礼

ご返答有難うございます。 ソースを直してみましたが、背景画像は表示されませんでした… HTMLとＣＳＳを別ファイルにしてあって以下のようなソースになってます。 【ＨＴＭＬ】 <head> <script type="text/javascript"> wall = new Array(); wall[0] = "aaaaaaaaaaaaaaa.jpg"; wall[1] = "bbbbbbbbbbbbbbb.jpg"; wall[2] = "ccccccccccccccc.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">#outline{ background-image:url(' , wall[rnd] , '); }</style>'); </script> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="outline"> <div class="outline-marign"> <div class="left"></div>　<div class="right"></div> <div class="both"></div> </div> </div> </body> 【ＣＳＳ】 body { text-align:center; } #outline { width:750px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .center-left { float:left; width:500px; } .right { float:right; width:120px; } .both { clear:both; } ＣＳＳ内のOutlineの部分に「 background-image:url(' , wall[rnd] , ');」 を入れるとレイアウトが崩れてしまいます。 Outlineと関連するどこかに、この記述を置かなければいけないのでしょうか？

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

関連するQ&A

  • JavaScriptで、参照する階層を変えるとCSSが読み込めない

    　ランダムに1.cssまたは2.cssというcssファイルを読み込むスクリプトを記述しています。 <script language="javascript"> <!-- var cssno = Math.floor(Math.random() * 2 + 1); document.write("<link rel='stylesheet' type='text/css' href='"+cssno+".css'>"); //--> </script> 　これでうまく動いたので、このスクリプトを含むHTMLファイルがある階層に「css」というフォルダを作り、その中にcssファイルを移しました。そこで、 <script language="javascript"> <!-- var cssno = Math.floor(Math.random() * 2 + 1); document.write("<link rel='stylesheet' type='text/css' href='css/"+cssno+".css'>"); //--> </script> というふうに、変数cssnoの前に階層を表す「css/」をつけたのですが、これをやったとたんに動かなくなりました。 　ファイルを同じ階層に移動させて、「css/」を取れば（＝元の状態に戻せば）動きます。参照する階層を間違えているのかと思って、<head></head>内に通常通り<link rel～>でCSSを指定したら読み込めました。 　スクリプトの記述方法がいけないんでしょうか？　どうすれば、フォルダ「css」からcssファイルを読み込めるようになりますか？

  • 背景画像のランダム表示

    お世話になります。 PHP勉強中です。 1.背景画像のランダム表示：bodyタグ内でなくdiv内の背景画像を変更したい。bottom right指定等施したいのでスタイルシートで書き出す？？ 2.確率を設定したい：1枚の基本画像が60％表示され、それ以外の複数の画像が40％で選択、その中で画像をランダムに設定したい。 3.使用する画像は同一フォルダ内にある、背景画像以外はいれない。今後枚数を増やしていく予定なので、ファイル名を1つずつ指定するのではなく、フォルダ内の画像を読んで、配列に・・・ と、やりたいことはあるのですが、どうやったらいいのやら・・・頭が混乱してます（汗） 私のサイトに訪問される方でjsをOFFにされている方が多少いらっしゃるので、どうせならPHPで！と意気込んでみたのですが・・・ もしよろしかったらご教授下さいませ。 よろしくお願い致します。 参考：現在設置のjsファイル <script> wall = new Array(); wall[0] = "./image/bg01.jpg"; wall[1] = "./image/bg02.jpg"; wall[2] = "./image/bg03.jpg"; wall[3] = "./image/bg04.jpg"; wall[4] = "./image/bg05.jpg"; wall[5] = "./image/bg06.jpg"; wall[6] = "./image/bg07.jpg"; wall[7] = "./image/bg08.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">div.mainTOP { background:url(' , wall[rnd] , ') no-repeat bottom right #FAFAFA; }</style>'); </script>

    • ベストアンサー
    • PHP
  • javaScriptでリンク画像のランダム更新表示

    画像をランダム表示する方法はわかったのですが、 各画像にリンク設定したいのと、 各画像の大きさをCSSのwidthやhighのように調整する方法をご教授ください。 <html> <body> <script type="text/javascript"> <!--　var imgURL = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg"]; var n = Math.floor(Math.random() * imgURL.length); document.write('<img src="'+imgURL[n]+'">'); // --></script> </body> </html>

  • GoogleChromeでは表示されません

    Javascriptで、IE9では表示されるのですが、GoogleChromeVer22では表示されません。 uncaught referenceerror: Randombg1 is not definedというデバッグ結果になっています。 下記のjsファイルがうまく動作してくれてないようですが、どこか間違ってる箇所がありましたら、 ご教授お願いします。 // JavaScript Document // ランダムに背景画像を変更する var wall = new Array(); /* 使用する背景画像を好きなだけ記述 */ wall[0] = "desert"; wall[1] = "devilscastle1"; wall[2] = "devilscastle2"; wall[3] = "devilscastle3"; wall[4] = "domdora"; wall[5] = "galaistomb"; wall[6] = "mountain"; wall[7] = "poison"; wall[8] = "prairie"; wall[9] = "rockymountaincave"; wall[10] = "swanpycave"; wall[11] = "woods"; var bgurl1 = [ 'http://blog-imgs-51.fc2.com/e/n/i/enix77777/dq1-' ]; function Randombg1() { var rnd = Math.floor((Math.random() * 100)) % wall.length; document.write('<table border="0" bordercolor="white" cellpadding="0" cellspacing="0">'); document.write('<tr><td style="background-image:url(' + bgurl1 + wall[rnd] + '.gif);" width="136" height=120" align="center">'); /* document.write('<style type="text/css"><!-- .bg1 { background-image:url(' + bgurl1 + wall[rnd] + '.gif); width:136px; height:120px; } --></style>'); */ } 下記がHTML文です。 <script type="text/javascript"><!-- Randombg1(); RandomImage1(); // --></script>

  • CSSでのレイアウト（Firefox向け）

    下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） 　　　┌──────────────┐ 　　　｜┌─────┐┌─────┐│ 　　　｜｜TEXT　　　　｜｜TEXT　　　　｜｜ 　　　｜｜　　　　　　　　｜｜　　　　　　　｜｜ 　　　｜└─────┘└─────┘│ 　　　└──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSのID名に配列を使えませんか？

    以下のようなソースで、項目ごとにサブメニューの開閉をしようとしているのですが、サンプルの#a1～に該当するID名を、配列として定義することってできませんか？ <style type="text/css"><!-- #a1 { display:none; } #a2 { display:none; } #a3 { display:none; } // --></style> <script type="text/javascript"><!-- function disp(aaa) { obj = document.getElementById(aaa); if( obj.style.display =="block" ){ obj.style.display ="none"; }else{ obj.style.display ="block"; } } function create(bbb){ document.write(bbb); } // --></script> <body> ああああ<a href="javascript:void(disp('a1'))">◎</a><div id="a1"><script type="text/javascript">create("アアアア");</script></div><br> いいいい<a href="javascript:void(disp('a2'))">◎</a><div id="a2"><script type="text/javascript">create("イイイイ");</script></div><br> うううう<a href="javascript:void(disp('a3'))">◎</a><div id="a3"><script type="text/javascript">create("ウウウウ");</script></div><br>

  • CSSのJavaScript参照

    JavaScriptによって変数に代入された文字列をCSSで参照し、 指定した場所に表示したいのですが、変数名が表示され代入された文字列が表示されません。 ソース <html><head> <title>a</title> <style type="text/css"> <!-- .str{ top:100px; left:10px; position:absolute; }--> </style> </head> <body> <div class="str3">str();</div> //ここで変数strに代入されたaを表示したい <SCRIPT LANGUAGE="JavaScript"> str = "a"; str(){document.write(str);} </SCRIPT></body></html> 初心者のため、間違いが多々あると思いますがよろしくお願いします。

  • javascriptにてcss切り替え

    現在webサイトを作成しており、javascriptのcss切り替えにてページの色変更を作っています。 (青、緑、赤、三色で作成) デフォは青で表示しています。 その後緑、赤とリンクで色が変わるようにしています。 ここでご質問です。 緑をクリックした場合は緑に変わる(赤も同様)のですが、別ページにリンクした場合、緑(赤)ではなく青に戻ってします。 別ページにとんでも緑(赤)が引き継がれるにはどのように記述したらよろしいでしょうか? ソースは以下のとおりです。 <head> <link rel="stylesheet" type="text/css" href="css/blue/top.css" media="all" /> <script src="js/styleswitch.js" type="text/javascript"></script> <link rel="alternate stylesheet" type="text/css" title="blue" href="css/blue/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="green" href="css/green/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="red" href="css/red/top.css" media="all" /> </head> <body> <div style="width:200px;"> <a href="javascript:chooseStyle('blue', 30)">青</a><br /> <a href="javascript:chooseStyle('green', 30)">緑</a><br /> <a href="javascript:chooseStyle('red', 30)">赤</a> </div> </body> javascriptは以下のところからしようしています。 http://noongoro.main.jp/note/note0059.html javascriptは初心者です。 ご教授お願いいたします。

  • 指定した背景画像をサイトを訪れるたびに切り替える

    Javascript初心者で、全く見当がつきません。 お力をお貸しください。 参考サイトのように、 Bodyではなく、DivのID一部分のみ、 背景画像がサイトを訪れるたびに切り替わるようにしたいのですが， どのサンプルも「Body」の背景が変わってしまいます。 どなたか、お答えして頂けないでしょうか？ <参考サイト> http://www.upenn.edu/ <現在記述中のソース> <html> <head> <style type="text/css"> #content { color: #ffe700; font-size: 30px; height: 600px; } </style> <title>見る度に背景色が変わります</title> <script language="JavaScript"> <!-- function color(){ bgcolor = "#"; for(i = 0 ; i < 6 ; i++) { //0から15の乱数を発生させる color = Math.floor(16 * Math.random()); //16進数に変換 color = color.toString(16); //つなぎ合わせる bgcolor = bgcolor + color; } //文字列を背景色に document.bgColor = bgcolor; } //--> </script> </head> <body onLoad="color()"> 見る度に背景色が変わります<br> <div id="content"> ここの背景にランダムに画像が変更して欲しい。Bodyではなく、Divの指定したID内にのみ表示して欲しいのです</div> </body> </html>

  • CSSで背景画像をランダムに表示させたいのですが

    CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか？ 背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。 <div class="main"> ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。 </div> スタイルシートの方では現在は .main { float:left; background-image:url(/image/top_bg01.jpg); background-repeat:no-repeat; min-width:736px; height:auto; border-right:1px solid #000000; } としており、このtop_bg01.jpgの部分の画像を top_bg01.jpg top_bg02.jpg top_bg03.jpg top_bg04.jpg top_bg05.jpg とランダムに表示させたいのですが、対応方法が分からずに困っています。 http://www.designwalker.com/2006/12/random-css.html はためしてみましたが、PHPがうまく対応できずに断念してしまいました。 どなた様か宜しくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する