- 締切済み
こちらの質問を参考に同じ様に画像をランダムするものを作りました。
zeffの回答
- zeff
- ベストアンサー率69% (137/198)
順番をシャッフルして、その順に出力させます。 画像数が増減した場合を考えておきましたが、 固定なら/*または～*/のコメントアウトを外して そちらを使ってみてください。 画像位置が特定ブロック内に収まっておらず、 バラバラの場合でも使えるかも。 <script type="text/javascript"> function rdmImgLink(){ var imgs = document.getElementById("box").getElementsByTagName("IMG"); /*または var imgs = [ document.images["imgs0"], document.images["imgs1"], document.images["imgs2"]]; */ var i, len = imgs.length, n=[], rdm=[], links = [], L = len, r, tmp, x; //初期化 for( i = 0; i < len; i++ ){ n[i] = i; //0,1,2,.... rdm[i] = imgs[i].src; links[i] = imgs[i].parentNode.href;//imgの親ノード:Aのリンク先 } //シャッフル:Fisher-Yates法 while( L ){ r = Math.floor( Math.random() * L ); tmp = n[--L]; n[L] = n[r]; n[r] = tmp; } //出力 for( i = 0; i < len; i++ ){ x = n[i]; //シャッフルされた番号 imgs[i].src = rdm[x]; imgs[i].parentNode.href = links[x]; imgs[i].alt = "imgs" + x; } } //window.onload //@cc_on window./*@if(@_jscript_version<=5.8) attachEvent('on'+ @else @*/ addEventListener(/*@end @*/ 'load', function(){ rdmImgLink(); }, false ); </script> </head> <body> <div id="box"> <p><a href="0.html"><img name="imgs0" src="images/image0.jpg" alt="imgs0" width="190" height="40"></a></p> <p><a href="1.html"><img name="imgs1" src="images/image1.jpg" alt="imgs1" width="190" height="40"></a></p> <p><a href="2.html"><img name="imgs2" src="images/image2.jpg" alt="imes2" width="190" height="40"></a></p> </div> </body> </html>
関連するQ&A
- 画像のランダム表示、及び画像毎のリンク設定に関して
こんにちは。 サムネールの画像が、最終的には100個位出来ます。個々のサムネール画像毎にリンクを設定したいと思います。 サムネール画像をダブらずランダムに表示する方法は、過去の質問を拝見して実現出来ました。 下記の質問が参考なりました。 http://oshiete1.goo.ne.jp/qa716071.html 過去の質問のとおり、下記のソースをまねて画像のランダム表示は可能になりました。基本的に上記質問のソースとほぼ同じ内容になります。 <html> <head> <title>ランダム表示</title> <script type="text/javascript"> <!-- NoMem = new Array(); function RndmNo(n){ x=Math.floor(Math.random()*29); if (NoMem.length){ for (j=0; j<NoMem.length; j++){ if (NoMem[j]==x){ RndmNo(n);} } } x=new String(x); if (x.length==1){ x="000"+x;} else if (x.length==2){ x="00"+x;} else if (x.length==3){ x="0"+x;} NoMem[n]=x; } for (k=0; k<3; k++){ RndmNo(k); } RndImg= new Array(); for (i=0; i<3; i++){ RndImg[i]= new Image(); RndImg[i].src="images/image"+NoMem[i]+".jpg"; } function ImgDisp(){ document.images["imgs0"].src=RndImg[0].src; document.images["imgs1"].src=RndImg[1].src; document.images["imgs2"].src=RndImg[2].src; } window.onload=ImgDisp; //--> </script> </head> <body> <img src="*" name="imgs0"><br> <img src="*" name="imgs1"><br> <img src="*" name="imgs2"> </body> </html> 画像は、images と言うフォルダを作り、フォルダ内に、image0000.jpg から image0019.jpg の画像を20個用意する事で、ランダムにサムネール画像を表示出来るようになりました。 希望として、サムネール画像毎にリンク先を設定したいと思っています。 イメージとして、ランダムに表示するバナー広告みたくしたいと思います。 サムネール画像とリンク先とは具体的に。 image0000.jpg が表示されたら、同じサイト内に ./0000.html へリンクを張れるようにしたいと思います。 また、最終的にサムネール画像は100個近くになり、リンク先もサムネール画像と同じ数になりますので、リンク先は別ファイルで管理出来るようになれば嬉しく思います。 アドバイスか、ヒントを頂ければと思います。
- ベストアンサー
- JavaScript
- ランダム表示とリンクの貼り付け
数百の画像を、ランダムにダブらないで表示させるのはできたのですが （画像名は整理しやすい0000.jpg～0100.jpgとしました） <script type="text/javascript"><!-- x=Math.floor(Math.random()*100); x=new String(x); if (x.length==1){ x="000"+x;} else if (x.length==2){ x="00"+x;} else if (x.length==3){ x="0"+x;} RndImg= new Image(); RndImg.src="images/image"+x+".jpg"; NoMem[n]=x;} //↑これって同じ画像が重複しないように。の意味でいいんですか？ function ImgDisp(){ document.images["imgs0"].src=RndImg.src; } window.onload=ImgDisp; //--></script> <body> <img src="*" name="imgs0"> </body> 一つ一つの画像にそれぞれリンクを貼りたいと思います。 どこに何を入れたらいいでしょうか？ それと ランダムにする画像を３つくらい並べたいのですが <img src="*" name="imgs0"> だと１つしかランダムにならずに、 あとの２つは画像が表示されません。 何を変えたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像のランダム表示
初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var imgs = new Array; var n = 5; var i; for(i=0;i<n;i++){ imgs[i] = new Image(); } imgs[0].src="image/001.jpg"; imgs[1].src="image/002.jpg"; imgs[2].src="image/003.jpg"; imgs[3].src="image/004.jpg"; imgs[4].src="image/005.jpg"; function disp(img){ img.src=imgs[Math.round(Math.random()*(n-1))].src; } //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascript 画像切り替え ランダム 順番
インラインフレーム内のランダムな画像切り替えはできたのですが、順番に切り替えていくというのが出来ません。。。 ランダムソース var imglist=new Array( "100_0003.jpg", "100_0006.jpg", "100_0008.jpg", "100_0009.jpg", "100_0021.jpg", "100_0022.jpg", "100_0023.jpg", "100_0025.jpg", "100_0001.jpg" ); var selectnum=Math.floor((Math.random()*100))%imglist.length; var output="<IMG src=images/randomimg/"+imglist[selectnum]+">" ; document.write(output); 順番ソース var imglist=new Array( "100_0003.jpg", "100_0006.jpg", "100_0008.jpg", "100_0009.jpg", "100_0021.jpg", "100_0022.jpg", "100_0023.jpg", "100_0025.jpg", "100_0001.jpg" ); var selectnum=imglist.length-1; var i=0; function forward() { i=selectnum--; var output="<IMG src=images/randomimg/"+imglist[i]+">" ; document.write(output); } テキストリンクを押してインラインフレーム内の画像を変更していきたいのですが。。。順番にすると真っ白になってしまいます。。。 どなたか解決方法よろしくお願いします。
- ベストアンサー
- JavaScript
- 複数枚画像を表示して一定時間で切り替える方法
画像を表示して一定時間で切り替える方法は別ページに記載されているものをみて出来たのですが、最初に複数枚表示してて、その画像を定時間で切り替えたいのですがご教授願います。 以下別質問で見つけたもの <!-- これを画像を張りたい位置に挿入。<body>～</body>内 --> <script type="text/javascript"> /* 設定部分 */ var interval = 3000; //切り替わる時間（1000=1秒） var imgs = new Array(); var hrefs = new Array(); imgs[0] = new Image(); imgs[0].src = "http://www.xxxxx.net/images/img-main/pake/013.jpg"; hrefs[0] = "http://www.xxxxx.net/moviepages/130923_707_01/index.html"; imgs[1] = new Image(); imgs[1].src = "http://www.xxxxx.net/images/img-main/pake/014.jpg"; hrefs[1] = "http://www.xxxxx.net/moviepages/130906_701_01/index.html"; imgs[2] = new Image(); imgs[2].src = "http://www.xxxxx.net/images/img-main/pake/015.jpg"; hrefs[2] = "http://www.xxxxx.net/moviepages/130830_698_01/index.html"; /* プログラム部分 */ var num = Math.floor(Math.random()*imgs.length); document.write('<a href="'+hrefs[num]+'" id="cth"><img src="'+imgs[num].src+'" id="cti" style="border:0" /></a>'); var cti = document.getElementById("cti"); var cth = document.getElementById("cth"); setInterval(function(){ num += Math.floor(Math.random()*(imgs.length-1))+1; if(num>=imgs.length) num -= imgs.length; cti.src = imgs[num].src; cth.href = hrefs[num]; },interval); </script> <!-- ここまで --> script初心者でよくわかりません＞＜
- 締切済み
- JavaScript
- 「2枚1組の画像」3セットを1セットずつランダムで表示させたい。
Javascriptの書き方はよく分からない素人です。 いつもソースを探してきて使っているレベルです。 やりたい内容に似たソース（▼以下）を探してきたのですが、 もともと「2枚1組の画像」を2セットずつ表示させるもので、 変更の仕方が分からないので教えていただきたいです。 さらに、「一定時間ごと」ではなく、 「ページを読み込む度」に表示を変えたいです。 （この場合全く違う書き方をすることになるのでしょうか？） よろしくお願いします。 ▼ここから－－－－－－－－－－－－－－－－－－－ <script language="javascript"><!-- setInterval("textch()",3000); TEXT = new Array('text0','text1','text2'); function textch() { for(i=0; i<TEXT.length; i++){ var tmpA, tmpB, rnd; rnd=Math.floor(Math.random() * TEXT.length); tmpA=TEXT[i]; tmpB=TEXT[rnd]; TEXT[i]=tmpB; TEXT[rnd]=tmpA; } for(j=0;j<TEXT.length;j++) { document.getElementById(""+TEXT[j]+"").style.display = "none"; if(j == 0 || j == 1) { document.getElementById(""+TEXT[j]+"").style.display = "block"; } } } //--></script> <div id="text0"><img src="images/a.jpg" alt="A" width="410" height="168"><img src="images/b.jpg" alt="B" width="470" height="168"></div> <div id="text1"><img src="images/c.jpg" alt="C" width="410" height="168"><img src="images/d.jpg" alt="D" width="470" height="168"></div> <div id="text2"><img src="images/e.jpg" alt="E" width="410" height="168"><img src="images/f.jpg" alt="F" width="470" height="168"></div>
- ベストアンサー
- JavaScript
- 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>
- 締切済み
- JavaScript
- 画像をランダムにスクリプト
ホームページをHTMLで作成しております。画像をランダムにスクリプトしてますが、画像のサイズが大きすぎるので、HTMLでサイズ変更する場合の、HTMLをご教授ください。 width="300" height="200"を挿入でいいのでしょうか。 その場合の挿入箇所をお教えください。 現在、下記のHTMLを作成しております。 <script language="JavaScript"> <!-- var image=new Array (); image[0]="s/b/bike1.jpg" ; image[1]="s/h/hatake207.jpg"; var rnd=Math.floor(Math.random()*image.length); document.write(" <img src=' "+image[ rnd ]+ " '> "); //--> </script> 宜しくお願いします。
- 締切済み
- HTML
- 画像をランダムに表示したい
var image = new Image[2]; // おまけ画像の読み込み image[0].src = "aaaa1.jpg"; image[1].src = "bbbb2.jpg"; // プレゼント画像を描画 int r=(int)(Math.random()*2); //ランダムに表示 context.drawImage(image[r], 0, 0); これだけでは、だめなのでしょうか!?
- 締切済み
- JavaScript
- 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