IEでのバナーランダム表示の不具合について
- IE7でバナーランダム表示の書き出し個数が不安定な不具合が発生しています。
- 問題はIE7のみで、firefox, safari, chromeでは正常に表示されることが確認されています。
- 原因や改善方法をご教示いただけると助かります。
- ベストアンサー
バナーランダム表示のＩＥでの不具合
画像とリンク先のセットをいくつか用意して、任意の場所に任意の数ランダムで表示させるJavaScriptです。 WEBで見つけたJavaScriptですが提供元は失念しました。 <script type="text/javascript"> <!-- var images = { // 画像とジャンプ先の URL のペア url : [ ['http://img06.shop-pro.jp/PA01022/054/product/2717384_th.gif', '?pid=2717384'], ['http://img06.shop-pro.jp/PA01022/054/product/2717387_th.gif', '?pid=2717387'], ['http://img06.shop-pro.jp/PA01022/054/product/3627058_th.gif', '?pid=3627058'], ['http://img06.shop-pro.jp/PA01022/054/product/4560888_th.gif', '?pid=4560888'], ['http://img06.shop-pro.jp/PA01022/054/product/4560969_th.gif', '?pid=4560969'], ], // 順番のシャッフル shuffle : function() { for (i = this.url.length; i > 0; --i) { tmp = this.url[p = Math.floor(Math.random()*i)] ; this.url[p] = this.url[i-1] ; this.url[i-1] = tmp ; } }, p : 0, // 表示画像のポインタ // 画像表示 put : function() { document.write('<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p++][0]+'" /></a>') ; if (this.p >= this.url.length) this.p = 0 ; } } ; images.shuffle() ; // --> </script> <!--ソースをランダムに書き出し--> <ul class="tagCloud"> <li class=level1><script type="text/javascript">images.put() ;</script></li> <li class=level2><script type="text/javascript">images.put() ;</script></li> <li class=level3><script type="text/javascript">images.put() ;</script></li> </ul> IEで書き出し個数が不安定なのですが原因や改善方法などアドバイスを頂けると助かります。 IE7で不具合を確認しており、firefox,safari,chromeなどでは問題ありません。 http://catee.net/ こちらの下部の画像がクラウドっぽく表示されている箇所に使用しており 36セット中18ヶ書き出していますが、数ヶしか表示されないことが多々あります。 よろしくお願い致します。
- dummygo
- お礼率68% (13/19)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
url : [ ['http://img06.shop-pro.jp/PA01022/054/product/2717384_th.gif', 'pid=2717384'], ['http://img06.shop-pro.jp/PA01022/054/product/2717387_th.gif', 'pid=2717387'], ['http://img06.shop-pro.jp/PA01022/054/product/3627058_th.gif', 'pid=3627058'], ['http://img06.shop-pro.jp/PA01022/054/product/4560888_th.gif', 'pid=4560888'], ['http://img06.shop-pro.jp/PA01022/054/product/4560969_th.gif', 'pid=4560969'],//←ここだよここ！ ], を url : [ ['http://img06.shop-pro.jp/PA01022/054/product/2717384_th.gif', 'pid=2717384'], ['http://img06.shop-pro.jp/PA01022/054/product/2717387_th.gif', 'pid=2717387'], ['http://img06.shop-pro.jp/PA01022/054/product/3627058_th.gif', 'pid=3627058'], ['http://img06.shop-pro.jp/PA01022/054/product/4560888_th.gif', 'pid=4560888'], ['http://img06.shop-pro.jp/PA01022/054/product/4560969_th.gif', 'pid=4560969'] ], に！
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
urlの、はいれつのいちばんさいごの , がよけいじゃねぇ？ あとかんけいないけど、shuffle()のなかの p とかに var つけるとか ばぶぅ～！
お礼
ご回答ありがとうございます。 ご指摘の点について確認してみましたが改善はされませんでした。 自分でもできる限り調査してみたいと思います。 よろしくお願い致します。
関連するQ&A
- 2箇所の画像をランダムに複数表示
はじめましてjavascript初心者のものです。 2箇所に配置されてる各画像をランダムに表示したく、以下宣言をしてますがどうしても2箇所目が表示されません。お手数ですが、教えてください！ 2箇所目をrandWrite_sとして名前を変更してます。 ▼▼▼▼▼▼▼▼▼▼▼▼meta内タグ▼▼▼▼▼▼▼▼▼▼▼▼ <script type="text/javascript"> <!-- // ランダムに画像を表示する1箇所目 var randObjects=[ '<a href="#"><img src="/images/ad_banner01.gif"></a>', '<a href="#"><img src="/images/ad_banner02.gif"></a>', '<a href="#"><img src="/images/ad_banner03.gif"></a>' ]; function randWrite() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr)[0]); randObjects.splice(rr,1); } //--> </SCRIPT> <script type="text/javascript"> <!-- // ランダムに画像を表示する2箇所目 var randObjects=[ '<a href="#"><img src="/images/ad_banner01_s.gif"></a>', '<a href="#"><img src="/images/ad_banner02_s.gif"></a>', '<a href="#"><img src="/images/ad_banner03_s.gif"></a>' ]; function randWrite_s() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr)[0]); randObjects.splice(rr,1); } //--> </SCRIPT> ▲▲▲▲▲▲▲▲▲▲▲▲meta内タグ▲▲▲▲▲▲▲▲▲▲▲▲ ▼▼▼▼▼▼▼▼▼▼▼▼body内タグ▼▼▼▼▼▼▼▼▼▼▼▼ <p><script type="text/javascript">randWrite();</script></p> <p><script type="text/javascript">randWrite_s();</script></p> ▲▲▲▲▲▲▲▲▲▲▲▲body内タグ▲▲▲▲▲▲▲▲▲▲▲▲
- ベストアンサー
- Java
- 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> ─────────────────────────── 上の物だと１行目は４つのテーブルになるのですが ２行目で残りの画像が１列になっていまします。。。 どうしたものでしょうか。。。 ご教授お願いいたします。
- ベストアンサー
- JavaScript
- バナー(javascript)をランダムで表示
FC2ブログのプラグインにjavascriptを使ってバナー広告をランダムで表示しています。 今までは問題なかったのですが、新しくバナーを加えた際に、そのバナーがjavascriptで出来たものだったので、どうしてよいものかわからなくなってしまいました。 ランダム表示にはこちらのページを参考、というかコピーしました。 http://javascript.eweb-design.com/0616_ra.html 貼り付けたいバナーのソースです↓ ソースの改変は認められていません。 <!--- ---> <script type="text/javascript"><!--- ---></script> <script src='jsファイルのURL'></script> <noscript></noscript> <!--- ---> これ以外のバナーはgifとリンクで構成されていましたので特に問題ありませんでしたが、そこに上記のjavascriptバナーを加えてランダムに表示することはできますか? 自分で調べてみましたが、自力では見つけられなかったのでココで質問をする事にいたしました。 回答お願いします。
- 締切済み
- JavaScript
- リンクにマウスポインタをおくと画像切り替え
リンクにマウスポインタをおくと画像を切り替えるソース（以下）をfreeのJavaScriptサイトからもってきて解読しています。よろしくお願いします。 ＜質問＞ ・gotolink=urlは、varなしの変数でChangeimage関数の引数urlを代入している？ window.location=gotolink、var gotolink="#"との関係は？ ・var gotolink="#"の#の意味は？ ・this.hrefとあるが、thisは何を指す？ ・"javascript:warp()"の意味は？ ・<script></script>、<script language="JavaScript1.1"></script>はscript定義が2つに分割されているが正しい記述か？ ---スクリプト--- <script> function changeimage(towhat,url){ if (document.images){ document.images.targetimage.src=towhat.src gotolink=url } } function warp(){ window.location=gotolink } </script> <script language="JavaScript1.1"> var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages("plane1.gif","plane2.gif","plane3.gif","plane4.gif","plane5.gif") </script> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <p><a href="b2.htm" onMouseover="changeimage(myimages[0],this.href)">Plane 1</a></p> ☆中略☆ <a href="javascript:warp()"><img src="plane0.gif" name="targetimage" border=0></a> </td> </tr> </table>
- ベストアンサー
- JavaScript
- 複数の画像をランダム（シャッフル）表示
１０枚の画像を更新するごとに重複せず ランダム（シャッフル）させるには どうしたらいいですか？ 理想は、JavaScriptは外部で読み込ませ、 そして下記のようにHTMLでリストを使い ランダム表示させたいのですが・・・ <ul> <li><a href="http://www.1/"><img src="s1.gif" /><br />あああ</a></li> <li><a href="http://www.2/"><img src="s2.gif" /><br />いいい</a></li> <li><a href="http://www.3/"><img src="s3.gif" /><br />ううう</a></li> <li><a href="http://www.4/"><img src="s4.gif" /><br />えええ</a></li> <li><a href="http://www.5/"><img src="s5.gif" /><br />おおお</a></li> <li><a href="http://www.6/"><img src="s6.gif" /><br />かかか</a></li> <li><a href="http://www.7/"><img src="s7.gif" /><br />ききき</a></li> <li><a href="http://www.8/"><img src="s8.gif" /><br />くくく</a></li> <li><a href="http://www.9/"><img src="s9.gif" /><br />けけけ</a></li> <li><a href="http://www.0/"><img src="s0.gif" /><br />こここ</a></li> </ul> 似たようなことをしているサイトがあったので 参考に貼り付けておきます。 function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }// JavaScript Document 詳しい方いましたら教えて頂けませんか？ 宜しくお願いします。
- 締切済み
- JavaScript
- ランダムにswfバナーを表示させたい
images/bnフォルダ内に、0.swf～4.swfのバナーを ５枚用意して、それをアクセスするたびにランダムに 表示させようと思い、下記のように記述してみたのですが、 エラー表示されて表示できません。 どこが間違っているのか、どなたかご教授頂けませんでしょうか。 <html> <head> <SCRIPT Language="JavaScript"> <!-- function randomJump() { ImageCount = 5; num = Math.floor(Math.random() * ImageCount); document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width='234' height='60'>"); document.write("<param name=movie value='images/bn/"+num+".swf'>"); document.write("<param name=quality value=high>"); document.write("<embed src='images/bn/"+num+".swf' quality=high pluginspage='http://www.macromedia.com/jp/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width='234' height='64'></embed>"); document.write("</object>"); } // --> </SCRIPT> </head> <body> <SCRIPT Language="JavaScript">randomJump();</SCRIPT> </body> </html>
- ベストアンサー
- JavaScript
- オンマウスで画像を変えたい。
オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像１URl" onmouseover="this.src='画像２URl';" onmouseout="this.src='画像１URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。
- ベストアンサー
- HTML
- IE6でナビ下に隙間ができてしまいます。
横並びのナビの下に隙間無く内容を入れたいのですが、IE6だとナビ下に２ミリ位の隙間ができてしまいます。 いろいろ調べてIE6対策でline-height: 0・margin: 0を追加してもうまくいきません。 何が間違っているのか、ご支持お願いします。 <body> <div id="wrapper"> <div id="headnavi"> <ul> <li id="A"><a href=""><span>A</span></a></li> <li id="B"><a href=""><span>B</span></a></li> <li id="C"><a href=""><span>C</span></a></li> <li id="D"><a href=""><span>D</span></a></li> <li id="E"><a href=""><span>E</span></a></li> <li id="F"><a href=""><span>F</span></a></li> </ul> </div><!-- / #headnavi --> <div id="pro_back"> <p>○○○○○</p> </div><!-- / #pro_back --> </div><!-- / #wrapper --> </body> </html> *{ margin: 0px; padding: 0px; font-weight: normal; list-style-type:none; } body { width: 100%; font-size: 75%; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 180%; color: #333; } #wrapper { position: relative; width: 960px; margin-left:auto; margin-right:auto; } #pro_back { width: 960px; height: 623px; background-image: url(images/pro_back.gif); background-repeat: no-repeat; margin: 0; } #headnavi { width:960px; height: 33px; margin: 0; } #headnavi ul { line-height: 0; margin: 0; } #headnavi ul li a { display: block; width: 172px; text-decoration: none; height: 33px; } #headnavi ul li a span { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; } ul li#A a { position: absolute; left: 890px; top: 0px; background-repeat: no-repeat; background-position: 0 0; background-image: url(images/topbotan.gif); margin: 0; } ul li#B a { position: absolute; left: 632px; top: 0px; background-repeat: no-repeat; background-position: 0 0; background-image: url(images/link.gif); margin: 0; } ul li#C a { position: absolute; left: 474px; top: 0px; background-repeat: no-repeat; background-image: url(images/mail.gif); margin: 0; } ul li#D a { position: absolute; left: 316px; top: 0; background-repeat: no-repeat; background-image: url(images/illustration.gif); margin: 0; } ul li#E a { position: absolute; left: 158px; top: 0; background-repeat: no-repeat; background-image: url(images/designwork.gif); margin: 0; } ul li#F a { position: absolute; left: 0px; top: 0; background-position: 0 0; background-repeat: no-repeat; background-image: url(images/profile.gif); margin: 0; }
- 締切済み
- CSS
- 画像をフェードアウト＆フェードインで切り替えたい
jQueryを使っています。 「<ul id="cat-list">」の「href」を取得して画像を切り替えています。 その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。 (クロスフェードならなお良いです。) 色々試したのですが、フェードのタイミングがうまく合ってくれません。 どのように記述したらいいでしょうか。 <script type="text/javascript"> $(function(){ $("#cat-list a").click(function(){ $("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text()); $("p#cat-name").text($(this).text()); return false; }); }); </script> <p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p> <p id="cat-name">ネコ1</p> <ul id="cat-list"> <li><a href="images/cat01.jpg">ネコ1</a></li> <li><a href="images/cat02.jpg">ネコ2</a></li> <li><a href="images/cat03.jpg">ネコ3</a></li> <li><a href="images/cat04.jpg">ネコ4</a></li> <li><a href="images/cat05.jpg">ネコ5</a></li> </ul> よろしくお願いします。
- ベストアンサー
- JavaScript
- Javaスクリプトで要素の表示・非表示の制御
すみません。大変困っています。どなたかお分かりになられます方がいらっしゃいましたら、どうかご享受いただけませんでしょうか？ javascriptの記述方法についてとなります。 制御したいソースコードは下記の通りです。 <ul id="img_box"> <li><img src="../images/p1.jpg" width="100" height="50" /></li> <li><img src="../images/p2.jpg" width="100" height="50" /></li> <li><img src="../images/no.jpg" width="100" height="50" /></li> </ul> 上記のソースコードの表示・非表示ですが、imgタグの中のファイル名がno.jpgだった場合のみに<li>から</li>をdisplayをnoneとして出力したいです。 javascript適用後のソースコードは下記になるようにしたいのですがご享受いただけませんでしょうか？ <ul id="img_box"> <li><img src="../images/p1.jpg" width="100" height="50" /></li> <li><img src="../images/p2.jpg" width="100" height="50" /></li> </ul> お手数をおかけいたしますが、何卒よろしくお願い致します。
- ベストアンサー
- JavaScript
お礼
ありがとうございます！ みごとに指摘の箇所間違ってました。 動的にループさせていたので基本的なケアレスミスに気づきませんでした。 おかげでとても助かりました。