- 締切済み
１０個の落ちてくる文字の位置を常に真中に表示
お知恵をおかりしたいのですが、 下記のソースで１０個の文字（GIF）がオンロードで落ちてくる という仕様なのですが、現在はポジションを指定してあるのですが、 これをスクリプトの追加で常に真中に揃えることがしたいのですが、 自分でもやってみましたがうまくいかずおわかりになる方お力をお貸しください。 <html> <head> <title></title> <script type="text/javascript"> window.onload = init; var n=8; var frac = [1.7,1.8,1.6,1.8,1.7,1.5,1.7,1.9]; var bound = [0.5,0.6,0.5,0.6,0.6,0.5,0.6,0.5]; var count = []; var elm=[]; var y = []; var handle=[]; function falling() { for(i=0;i<n;i++){ y[i] += ++count[i] * 0.001 * frac[i]; elm[i].style.top = y[i]; if(y[i] >= wH){ y[i] = wH; count[i] = Math.ceil(-count[i] * bound[i]); if( count[i] == -1 ) clearInterval( handle[i] ); } } } function init() { for(i=0;i<n;i++) { elm[i] = document.getElementById("sample"+i); handle[i] = setInterval(falling,10); y[i]=count[i]=0; } wH = document.all ? document.body.clientHeight : window.innerHeight; wH = wH - elm[0].height; } </script> </head> <body> <center> <img src=".jpg" width="330" height="440"> <img src=".gif" id="sample0" style="position:absolute;left:250px;"> <img src=".gif" id="sample1" style="position:absolute;left:300px;"> <img src=".gif" id="sample2" style="position:absolute;left:350px;"> <img src=".gif" id="sample3" style="position:absolute;left:400px;"> <img src=".gif" id="sample4" style="position:absolute;left:450px;"> <img src=".gif" id="sample5" style="position:absolute;left:500px;"> <img src=".gif" id="sample6" style="position:absolute;left:550px;"> <a href="#" alt="ENTER"><img src="enter.gif" id="sample7" border="0" style="position:absolute;left:680px;"></a> </center> </body> </html> というソースなのですが、たぶん１行か２行のコードの追加でモニタサイズなど関係なしに常にど真ん中にならべることができると思うのですが、難しく。。。。。 どうかなのとぞよろしくお願いいたします。
- gyrate
- お礼率45% (10/22)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
<center>～</center> <div style="position:relative;text-align:center;">～</div>
関連するQ&A
- スタイルシートのレイヤーに乗せた画像を動的に表示する方法
<div id="test" style="position=absolute; top=400px; left=200px; z-index=10;"><img src="gazou.gif"></div> 上記を動的に表示するために以下の方法を考えました var element = document.createElement('div'); element.id = "test"; element.style = "position=absolute; top=400px; left=200px; z-index=10;"; element.innerHTML = '<img src="gazou.gif">'; var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(element); しかしこれだと、element.style = "position=absolute; top=400px; left=200px; z-index=10;"; の部分がまずいらしく動作しません。 どのようにすればよいでしょうか。 よろしくお願いします。
- 締切済み
- JavaScript
- このタグ教えて下さい
このタグを使うと画像がスライドするように3秒ごとに画像が変わって行くらしいのですが、私も使ってみたいです。 ですが何処に自分の作った画像を入れたらよいのか解りません？ 画像サイズは、横485 縦162 枚数は4枚入れてみたいです。 どうぞ宜しくお願いします。 <style type="text/css"> #photo1{ position:absolute; top:16px; left:-256px; z-index:1; } #photo2{ position:absolute; top:16px; left:16px; } </style> <script type="text/javascript"> window.onload =function(){ photo1Img=document.getElementById("photo1"); photo2Img=document.getElementById("photo2"); album.swapImage(); } var album = { imageURL : [ "a.gif", "b.gif", "c.gif", ], swapImage : function(){ this.count++; if (this.count >= 3) this.count = 0;this.count2 = 0; photo1Img.style.left=""; photo1Img.src = this.imageURL[this.count]; setTimeout("album.counter()", 100); }, counter:function(){ this.count2++; photo1Img.style.left=(this.count2*16-256)+"px"; if(this.count2 > 16){ setTimeout("album.swapImage()", 3*1000); photo2Img.src = this.imageURL[this.count]; } else setTimeout("album.counter()", 30); }, count : 0,count2 : 0 }; </script> <p> <img src="a.gif" id="photo1" width="256" height="64"> <img src="a.gif" id="photo2" width="256" height="64"> </p>
- 締切済み
- その他([技術者向] コンピューター)
- 複数のボールの落下、バウンドのさせかた
お分かりの方、どうかお知恵をお貸しください。 画像（文字）がページのオンロードで落下してくるものですが、 http://flabo.net/labo/bound/index.html <html> <head> <title></title> <script type="text/javascript"> window.onload = init; var frac = 2; var bound = 0.5; var count = 0; var elm; var y = 0; function falling() { y += ++count * 0.098 * frac; elm.style.top = y; if(y >= wH){ y = wH; count = Math.ceil(-count * bound); if( count == -1 )clearInterval( handle ); } } function init() { elm = document.getElementById("sample"); wH = document.all ? document.body.clientHeight : window.innerHeight; wH = wH - elm.height; handle = setInterval(falling,10); } </script> </head> <body> <img src="f.gif" id="sample" style="position:absolute"> </body> </html> のページにあるようなもので、この物体、や文字をここでは１つですが、１０個の文字を横に並べて、落ちる速度や、バウンドの速さなど このソースに手を加えてできますでしょうか？（このソースに手を加えてできなければ、何かほかに良いスクリプトはありますでしょうか） 自分でも試してもみたのですが、２つとしても上手く作動しなく、 とても頭を抱えてしまっています。 お分かりになる方がおりましたら、どうかお知恵をお貸しください。 宜しくお願いいたします。
- 締切済み
- JavaScript
- innerTextで文字を変えたいのですが
配列imに入っている数値が1なら"ok"と表示、0なら"-----"と表示したいのです。 以下のソースなのですが <html> <head> <style type=text/css> .im{ font-size:1.5em; font-weight:500; color:#ffffff; text-dacoration:none; text-decoration:blink; z-index:3; } </style> <script langage="JScript"> var im=new Array(30); var haba=0; //初期設定 function Preferences(){ for(i=1;i<=30;i++){ obj=document.getElementById("num"+i); obj.style.posTop+=haba; haba+=25; } for(f=1;f<=30;f++){ im[f]=0; im[2]=1; im[5]=1; if(im[f]==0){ num="num"+f; num.innerText="----------"; }else{num.innerText="ok";} } } </script> </head> <body bgcolor="#0000000" onLoad="Preferences()"> <div id="num1" class="im" style="position:absolute;top:25px;left:240px;">A1</div> <div id="num2" class="im" style="position:absolute;top:25px;left:240px;">A2</div> <div id="num3" class="im" style="position:absolute;top:25px;left:240px;">A3</div> <div id="num4" class="im" style="position:absolute;top:25px;left:240px;">A4</div> <div id="num5" class="im" style="position:absolute;top:25px;left:240px;">A5</div> <div id="num6" class="im" style="position:absolute;top:25px;left:240px;">A6</div> <div id="num7" class="im" style="position:absolute;top:25px;left:240px;">A7</div> <div id="num8" class="im" style="position:absolute;top:25px;left:240px;">A8</div> <div id="num9" class="im" style="position:absolute;top:25px;left:240px;">A9</div> <div id="num10" class="im" style="position:absolute;top:25px;left:240px;">A10</div> <div id="num11" class="im" style="position:absolute;top:25px;left:240px;">A11</div> <div id="num12" class="im" style="position:absolute;top:25px;left:240px;">A12</div> <div id="num13" class="im" style="position:absolute;top:25px;left:240px;">A13</div> <div id="num14" class="im" style="position:absolute;top:25px;left:240px;">A14</div> <div id="num15" class="im" style="position:absolute;top:25px;left:240px;">A15</div> <div id="num16" class="im" style="position:absolute;top:25px;left:240px;">A16</div> <div id="num17" class="im" style="position:absolute;top:25px;left:240px;">A17</div> <div id="num18" class="im" style="position:absolute;top:25px;left:240px;">A18</div> <div id="num19" class="im" style="position:absolute;top:25px;left:240px;">A19</div> <div id="num20" class="im" style="position:absolute;top:25px;left:240px;">A20</div> <div id="num21" class="im" style="position:absolute;top:25px;left:240px;">A21</div> <div id="num22" class="im" style="position:absolute;top:25px;left:240px;">A22</div> <div id="num23" class="im" style="position:absolute;top:25px;left:240px;">A23</div> <div id="num24" class="im" style="position:absolute;top:25px;left:240px;">A24</div> <div id="num25" class="im" style="position:absolute;top:25px;left:240px;">A25</div> <div id="num26" class="im" style="position:absolute;top:25px;left:240px;">A26</div> <div id="num27" class="im" style="position:absolute;top:25px;left:240px;">A27</div> <div id="num28" class="im" style="position:absolute;top:25px;left:240px;">A28</div> <div id="num29" class="im" style="position:absolute;top:25px;left:240px;">A29</div> <div id="num30" class="im" style="position:absolute;top:25px;left:240px;">A30</div> </body> </html> innrTextで表示する文字を変えるところがおかしいんだと思いますがどう直せばいいのか分かりません。 どなたか教えてください。
- ベストアンサー
- JavaScript
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- 画像を重ねて表示する方法を知りたいです。
おせわになっております。 下記のようなソースを作りました。 ------------------------------------------------- <div style="position: relative;"> <img src="sideback.gif" width="182" height="812" alt="sideback"> <div style="position: absolute; top: 30px; left: 15px;"> <span style="position:absolute; top:10px; left:10px"><img src="sidemanu-canner.gif" alt="メニュー"> </span> </div> </div -------------------------------------------------- 画像を重ねたいんですが、firefoxでプレビューすると （IEでも同じです。） 下の画像（背景）の上に上の画像が表示されるはずだった場所に四角い3つぐらい色のついたマークがでて （IEは小さな資格に×マーク） 上に表示されるはずだった画像が表示できません どうしたらいいでしょうか？
- ベストアンサー
- HTML
- マウスをクリックで画像・・・
マウスをクリックすると画像が飛び散る素材(?)を頂いてきたのですが、 以下の通りにUPすると「エラー」が出てしまいます。 どこが悪いのか解らないので よろしくお願いします。 <SCRIPT language="JavaScript" src="ht://xxx/xx.js"></SCRIPT> <BODY onload="initMouseEvents()"> <DIV id="sparks"> <DIV id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/1.gif" width="15" height="16"></DIV> <DIV id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/2.gif" width="15" height="16"></DIV> <DIV id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/3.gif" width="15" height="16"></DIV> <DIV id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i4.gif" width="15" height="16"></DIV> <DIV id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i5.gif" width="15" height="16"></DIV> <DIV id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i6.gif" width="15" height="16"></DIV> <DIV id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/7.gif" width="15" height="16"></DIV> <DIV id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/8.gif" width="15" height="16"></DIV> <DIV id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/9.gif" width="15" height="16"></DIV> <DIV id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/10.gif" width="15" height="16"></DIV> </DIV>
- 締切済み
- JavaScript
- イベント？動作の位置を画面の真ん中にするには？
ジャバスクリプトの動作を中心にする方法がわかりません。 http://www.openspc2.org/HTML_JS_CSS/table/006/ ↑これなんですが、このプログラムを、画面の真ん中に配置したいんですが、どこにどのように手を加えていいかわかりません。 画面の真ん中とは、これを見る環境に関わらず、インターネットエクスプローラーで見たときに、中央に配置という意味です。 ＨＴＭＬでいう<centr>みたいなものです。 下記にプログラムを載せておきました。 私の説明で分からなかったら、補足で回答します。 <title>クリックで表示するテーブルをスクロールさせて切り替える</title> <script language="JavaScript"><!-- tMax = 5; // テーブル個数 tWidth = 200; // １つのテーブル幅 step = 10; // １回の移動量（単位：ピクセル） num = 0; offset = 0; flag = false; function scrollSetTBL(n) { if (flag) return; num += n; if (num < 0) { num = 0; return; } if (num >=tMax) { num = tMax-1; return; } offset = n * step; count = tWidth / step; setTimeout("scrollTBL()",10); flag = true; } function scrollTBL() { scrlTBL.style.pixelLeft -= offset; count--; if (count > 0) setTimeout("scrollTBL()",10); else flag = false; } // --></script> </head> <body> <img src="left.gif" onMousedown="scrollSetTBL(-1)" style="position:absolute;top:200px;left:20px;"> <img src="right.gif" onMousedown="scrollSetTBL(1)" style="position:absolute;top:200px;left:60px;"> <div style="position:absolute;top:10px;left:10px;clip:rect(0px 200px 200px 0px)"> <table id="scrlTBL" border="0" cellspacing="0" cellpadding="0" style="position:absolute;top:0px;left:0px;"> (以下略)
- ベストアンサー
- JavaScript
- 時間差で画像を動作させたいjavascriput
時間差で画像にあれこれさせる！javascriput (1)HPが開かれたと同時に「wakuwaku.gif」がフェードインし、すぐにフェードアウトさせる。（できれば速度調整できるとうれしいです） ↓ (2)フェードアウト後「ｕｋｉｕｋｉ.gif」を50px下に動かし止める（できれば速度調整できるとうれしいです）。 これと同時にmogemoge028○.jpgをフェードインさせる。 自分では以下まで作成しましたが。setTimeOutのいい使い方や もっと早く動作するのあるだろ！ 等、良案をよろしくお願い致します。 あまり時間が作れなく、基礎等も毎日勉強しているのですがおっつきせん＾＾； もちろん教えて下さったのを元に勉強させていただきたいと思っております。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <DIV style="top : 100px;left : 106px; position : absolute; z-index : 2; " id="Layer1"><IMG src="wakuwaku.gif" width="1050" height="610" border="0"></DIV> //画像１つ目 <DIV style="top : 153px;left : 198px; position : absolute; z-index : 3; " id="Layer2"><IMG src="ｕｋｉｕｋｉ.gif" width="445" height="495" border="0"></DIV> //画像２つ目 <DIV style="top : 170px;left : 200px; position : absolute; z-index : 1; " id="Layer3"> <script language="JavaScript" type="text/javascript"> <!-- var randimg = new Array(); var randimg_count = 0; randimg[randimg_count++] = "mogemoge0287.jpg" randimg[randimg_count++] = "mogemoge0288.jpg" randimg[randimg_count++] = "mogemoge0289.jpg" randimg[randimg_count++] = "mogemoge0280.jpg" document.write("<img src=\"" +randimg[Math.floor(Math.random() * randimg.length)]+ "\">"); //--> </script> </DIV>//画像３つ目（ランダム表示） </BODY> </HTML>
- ベストアンサー
- JavaScript
- Firefoxで表示できないのは何故でしょう？
お世話になります IE6、Operaでは表示できたのですがFirefoxでは表示できませんでした（＞＜） 何か見落としがあるのでしょうか？ <script language="javascript"> <!-- window.onload = function() { n=document.getElementById("div1").innerText; if(n == "a0"){ document.getElementById("img1").style.display = "block"; document.getElementById("img1").style.top = "100px"; document.getElementById("img1").style.left = "100px"; } if(n == "a"){ document.getElementById("img2").style.display = "block"; document.getElementById("img2").style.top = "100px"; document.getElementById("img2").style.left = "200px"; } } //--> </script> <div id="div1">a</div> <form action="test.cgi" method="post"> <input type="hidden"name="a" value="leap_day"> <input type="image" src="sample0.gif" id="img1" style="position:absolute;display:none;"> </form> <form action="test.cgi" method="post"> <input type="hidden"name="b" value="leap_day"> <input type="image" src="sample1.gif" id="img2" style="position:absolute;display:none;"> </form> n=document.getElementById("div1").innerText; if(n == "a0"){ } if(n == "a") { } を消すと表示はできるのですが・・・
- ベストアンサー
- JavaScript
