ランダム表示とリンクの貼り付け
- 数百の画像をランダムに表示させる方法と、画像にリンクを貼り付ける方法についての質問です。
- 現在は画像をランダムに表示することはできていますが、画像にリンクを貼りたいと思っています。
- また、ランダムにする画像を複数並べたいのですが、現在は1つしかランダムにならず、他の画像は表示されません。
- ベストアンサー
ランダム表示とリンクの貼り付け
数百の画像を、ランダムにダブらないで表示させるのはできたのですが （画像名は整理しやすい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
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
NoMem[n]=x;} //↑これって同じ画像が重複しないように。の意味でいいんですか？ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ パクリ元にこの部分の定義があるはず。 「}」の片割れも吹っ飛んでいる。
関連する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
- 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
- 画像のランダム表示
初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ 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
- 複数枚画像を表示して一定時間で切り替える方法
画像を表示して一定時間で切り替える方法は別ページに記載されているものをみて出来たのですが、最初に複数枚表示してて、その画像を定時間で切り替えたいのですがご教授願います。 以下別質問で見つけたもの <!-- これを画像を張りたい位置に挿入。<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
- こちらの質問を参考に同じ様に画像をランダムするものを作りました。
こちらの質問を参考に同じ様に画像をランダムするものを作りました。 http://okwave.jp/qa/q716071.html No.3の回答を参考に一緒のものを作り、正常に動作しております。 ここからさらに、画像に合わせたリンク先へ飛ばしたいのですが （0.jpg→0.html 1.jpg→1.html 2.jpg→2.html の様に） どう手を加えればいいでしょうか？アドバイスよろしくお願いします。 【以下javascriptの部分】 <script type="text/javascript"><!-- NoMem = new Array(); function RndmNo(n){ x=Math.floor(Math.random()*100);//「Math.random()*100」の"100"は、用意している画像ファイルの枚数を指定 if (NoMem.length){ for (j=0; j<NoMem.length; j++){ if (NoMem[j]==x){ RndmNo();} } } 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"; //「"images/image"」には画像ファイルへのパスの共通部分を、「".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>
- 締切済み
- JavaScript
- 1万個からランダムリンクさせるには？
1万個からランダムリンクさせたいのですが、 jmp〔０〕からjmp〔１００００〕まで作ってしまうと 異常にソースが長くなり、読み込みが長くなってしまいました。 軽量化して読み込みを早したいのですが、いい方法はないでしょうか？ 使用したソースです プログラム初心者ですので具体的に書いていただけるとうれしいです。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY bgcolor="#ffffff"> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img0.jpg"; img[1] = "img/img1.jpg"; img[2] = "img/img2.jpg"; img[3] = "img/img3.jpg"; img[4] = "img/img4.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT> </BODY> </HTML>
- 締切済み
- JavaScript
- スライドショーにフェード効果と再ランダム表示を…
前回、重複しない画像選びを教えて頂き、その後の続きを頑張ってみましたが 策が尽きてしまいました。皆様のお力をお借りできないでしょうか。 【※現在の状況】 ・[A]→[B1]→[B2]→[C]の順番で再生 ・[A] [C]は固定（指定）画像を表示、[B1] [B2]はB1～5.jpgの中からランダムに表示し、重複選択を回避しています。 上記にさらに下記機能をプラスしたいと思っております。 【実現したいこと】 ・クロスフェード（またはフェードイン、アウト）を実装したい。 ・初回再生時にランダムで取得した画像を、リピート再生時にもう一度ランダム読込み表示させたい。 形式は上記内容を踏まえた物であれば、まったく違うものになっても構いません。 どうか助けて頂けないでしょうか。よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SLIDESHOW</title> <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.js"></script> <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js"></script> <SCRIPT LANGUAGE="JavaScript"> <!-- var imgA = ["images/A.jpg"], imgB = new Array(); imgB[0] = "images/B1.jpg"; imgB[1] = "images/B2.jpg"; imgB[2] = "images/B3.jpg"; imgB[3] = "images/B4.jpg"; imgB[4] = "images/B5.jpg"; var n1 = Math.floor(Math.random()*imgB.length); while ( true ) { var n2 = Math.floor(Math.random()*imgB.length); // n1とn2がちがっていればループ終了 同じの場合はもう一度ランダム実行 if ( n1 != n2 ) break; } imgC = ["images/C.jpg"]; cnt = 0; interval = 1000; function img_slide(){ //以下枚数分繰り返し if(cnt==0) {document.show.src=imgA; cnt++; }else if(cnt==1) {document.show.src=imgB[n1]; cnt++; }else if(cnt==2) {document.show.src=imgB[n2]; cnt++; }else if(cnt==3) {document.show.src=imgC; cnt=0; } } function img_move(){ img_slide(); timerID = setTimeout("img_move()",interval); } // --> </SCRIPT> </head> <body onload="img_move()"> <div> <img src="images/A.jpg" name="show" width="300" height="250" > </div> </body> </html>
- ベストアンサー
- JavaScript
- 画像をランダムに表示し、リンクもランダムにしたい
下記の通りにしたら、ランダムに画像が表示され、 クリックすれば画像とペアになっているアドレス先に飛ぶことは出来たのですが そのときのリンク先をランダムにすることは出来ないでしょか？ 例えば、img[2] の画像が表示された場合、jmp[2] ではなく ５つのアドレスの中からランダムにリンク先が決まる、 というようなことなんですが・・・。 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
- <img src"○.jpg">の○をランダムに！
1.jpgから30.jpgの30枚の画像はimagesという名のフォルダにあり、 それらの画像をJavaScriptで画像を1枚目からランダムにフェードインするものを作りたく、 http://asamuzak.jp/html/302を参考にして、 2枚目からランダムにフェードインすることはできました。 しかし、1枚目が必ず同じ画像が表示されてしまいます。 body内の<img src"1.jpg" id=""> の部分が表示される1枚目のようです。 1.jpgを2.jpgにすると2.jpgが最初に表示されます。 1枚目からランダムにフェードインするものを作るには、 この<img src"1.jpg" id="">を<img src"ランダムな整数.jpg" id=""> にすればいいのでは？ と思いました。 自分が考えたコードは、 下記コードの場合の動作は、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <script language="JavaScript"> <!-- var n = Math.floor((Math.random() * 29))+1; //--> </script> </head> <body> <img src="../images/1.jpg" /> </body> </html> 1.jpgが毎回必ず表示されます。 ランダムな整数を取得できるJavaScriptを作り、 var n = Math.floor((Math.random() * 29))+1; その整数を上記コードの <body> <img src="../images/1.jpg" /> </body> の部分を <body> <img src="../images/n.jpg" /> </body> とvar nを入れてやれば 1～30のランダムな整数が入って ページを更新するたびに画像が変わると考えました。 <img src="../images/n.jpg" />の書き方を直せばいいと思うのですが、 どのようにしたらいいのでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- ランダム表示
某サイトで このようなスプリクトを手に入れたのですが 設置した際に 横310Ｘ縦190と言う 表示画像サイズの指定の仕方が わかりません いろいろ 試したのですが 素人のため なかなか うまくいきません 下のスプリクトにどこにどのようなタグを入れていいのか教えてください 皆様お力を貸してください <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img0.jpg"; img[1] = "img/img1.jpg"; img[2] = "img/img2.jpg"; img[3] = "img/img3.jpg"; img[4] = "img/img4.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT>
- ベストアンサー
- JavaScript
お礼
同時に３つのランダム画像表示はできました！ ありがとうございました。 お願いしてばかりで申し訳ないのですが ひとつひとつのリンクはどうすればいいのでしょうか？
補足
ありがとうございます～ 参考元よく読みました。すみません。 //以下、乱数生成の関数 function RndmNo(n){ x=Math.floor(Math.random()*RndImg.length); if (NoMem.length){ for (j=0; j<NoMem.length; j++){ if (NoMem[j]==x){ RndmNo();} } //上記ループで重複する番号がないかチェック。 重複していればこの関数を再起 } NoMem[n]=x;//生成した乱数を配列に格納 } for (k=0; k<3; k++){//「k<3」の3は画面上に表示する画像の枚数を指定 RndmNo(k); } function ImgDisp(){ document.images["imgs0"].src=RndImg[NoMem[0]].src; document.images["imgs1"].src=RndImg[NoMem[1]].src; document.images["imgs2"].src=RndImg[NoMem[2]].src; } ここのことですよね。 やってみます。