複数の画像をランダムに表示させるソース
- テーブル内のセルにリンクバー付きのランダムな画像を表示するソースコードを教えてください。
- 画像数やURL、パスを簡単に書き換えるだけで使用できる、XHTMLで使えるJavaScriptによるソースコードをご教授ください。
- 素人でも簡単に使用できる、XHTML形式の既存ページで使用するための画像ランダム表示のソースコードを教えてください。
- ベストアンサー
複数の画像をランダムに表示させるソースを教えて？
画像は50枚前後、画像といってもリンクバーで画像毎にそれぞれの違ったリンク先ＵＲＬも指定したく、（target="_blank"）なおかつ表示箇所はテーブル内のセル8箇所で、重複しないようにランダムに表示させたいです。と、ＸＨＴＭＬで書かれた既存ページで使うのでスクリプトは外部ファイル（ｊｓ）にして、ページコード上では<body onload="____"><img id="～>等で読み込ませたいです。※ＸＨＴＭＬではname属性は使えません。また私はjavascriptについて全くの素人ですので、画像数、ＵＲＬ、パス等を書き換えるだけで直ぐに使えるソースが欲しいです。どなたか教えて頂けると幸いに存じます。
- pfam
- お礼率87% (7/8)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
[ファイル構成] ├hoge.html └img └banner ├00.jpg ├01.jpg ├02.jpg [hoge.html] <html><head> <script> var imgcount=10; //img枚数 ここに枚数を =の後に入れてください var viewcount=8; //表示するのは 8枚なので 8 var Images = new Array(); var Link = new Array(); Link[0]="http://questionbox.jp.msn.com/"; //link先0 Link[1]="http://www.yahoo.co.jp/"; //link先1 Link[2]="./"; //以下同様に http://から Link[3]="./"; //画像の枚数分 /*・・・・・link の分だけ追加*/ Images[0] = './img/banner/00.jpg'; // for文は はずしてください Images[1] = './img/banner/01.jpg'; // Link[数字] と Image[数字]の Images[2] = './img/banner/02.jpg'; // 数字部分があうように Images[3] = './img/banner/03.jpg'; // 枚数分 /* imgファイルは img/(数字).gif 上をいじれば変更可能・配列に直接書き込んでもおｋ*/ function changeImage(){ for(i=0;i<viewcount;i++){ k = parseInt(Math.random() * Images.length); document.getElementById("a_"+i).innerHTML='<a href="'+Link[k]+'" target="_blank"><img src="'+Images[k]+'"></a>'; Images.splice(k,1); } } </script> </head> <body onload="changeImage();"> <table> <tr> <td id="a_0"></td> <td id="a_1"></td> <td id="a_2"></td> <td id="a_3"></td> </tr> <tr> <td id="a_4"></td> <td id="a_5"></td> <td id="a_6"></td> <td id="a_7"></td> </tr> </table> </body> </html> 今後のためにもjavascript のfor文、if文、変数、配列について、 html の idについて、少し 勉強されるのがいいとおもいます。 document.getElementById("a_"+i).innerHTML='<a href="'+Link[k]+'" target="_blank"><img src="'+Images[k]+'"></a>'; で <td id="a_○"></td> の 中身を innerHTMLで書き換えています。 <a href="'+Link[k]+'"・・・ で href= の中身を 配列Link で指定してます。
その他の回答 (1)
- noris02
- ベストアンサー率74% (56/75)
<html><head> <script> var imgcount=6; //img枚数 var viewcount=3; //表示枚数 var Images = new Array(); var Link = new Array(); Link[0]="./"; //link先0 Link[1]="./"; //link先1 Link[2]="./"; //link先2 Link[3]="./"; //link先3 Link[4]="./"; //link先3 Link[5]="./"; //link先3 /*・・・・・link の分だけ追加*/ for(i=0;i < imgcount;i++){ Images[i] = './img/icon' + i + '.gif'; } /* imgファイルは img/(数字).gif 上をいじれば変更可能・配列に直接書き込んでもおｋ*/ function changeImage(){ for(i=0;i<viewcount;i++){ k = parseInt(Math.random() * Images.length); document.getElementById("a_"+i).innerHTML='<a href="'+Link[k]+'" target="_blank"><img src="'+Images[k]+'"></a>'; Images.splice(k,1); } } </script> </head> <body onload="changeImage();"> <table> <script> //この部分はテーブルを表示してるだけなので書き換えてください m=""; for(i=0;i<viewcount;i++){ if(i==0||i==4)m+="<tr>"; m+='<td id="a_'+i+'">a</td>'; if(i==3)m+='</tr>'; } document.write(m); </script> </table> </body> </html>
お礼
ご回答ありがとうございます。 しかし私が無知すぎて使用してみたものの、全く機能しません。 どこが間違っているのかもわかりません。もう少し教えていただけないでしょうか？ 参考ＵＲＬのページも以前に見たことありましたが書き換え方がわからず使用できませんでした。 リンク先の部分は Link[0]="./http://questionbox.jp.msn.com/"; Link[1]="./http://www.yahoo.co.jp/"; この書き方でいいのでしょうか？ for(i=0;i < imgcount;i++){ Images[i] = './img/icon' + i + '.gif';の部分は Images[0] = './img/banner/0' + i + '00.jpg'; Images[1] = './img/banner/1 + i + '01.jpg'; こんな感じで画像枚数分増やせば いいのでしょうか？ そもそも記述方法があってるのでしょうか？ あとセル内に <td> <img id="0" src="img/banner/00.jpg" /> ←最初にくる画像を指定？ </td> これでいいのでしょうか？ すみません、お手数をお掛けいたしますが、もう一度教えていただけると 非常に助かります。どうかよろしくお願いいたします。
関連するQ&A
- 複数のランダム表示について
現在、外部のjsを読み込み、 ランダムではなく下記の方法で ４バナー表示をしております。 【index.html】 <script type="text/javascript" src="js/banner.js"></script> 【banner.js】 document.write("<ul class=\"banner\">"); document.write("<li><a href=\"http://1.jp/\" target=\"_blank\"><img src=\"http://1.jp/img/1画像.jpg\" alt=\"1\" width=\"200\" height=\"80\" /></a><br />1テキスト</li>"); document.write("<li><a href=\"http://2.jp/\" target=\"_blank\"><img src=\"http://2.jp/img/2画像.jpg\" alt=\"2\" width=\"200\" height=\"80\" /></a><br />2テキスト</li>"); document.write("<li><a href=\"http://3.jp/\" target=\"_blank\"><img src=\"http://3.jp/img/3画像.jpg\" alt=\"3\" width=\"200\" height=\"80\" /></a><br />3テキスト</li>"); document.write("<li><a href=\"http://4.jp/\" target=\"_blank\"><img src=\"http://4.jp/img/4画像.jpg\" alt=\"4\" width=\"200\" height=\"80\" /></a><br />4テキスト</li>"); document.write("</ul>"); 【ブラウザ】 1画像.jpg 1テキスト -------- 2画像.jpg 2テキスト -------- 3画像.jpg 3テキスト -------- 4画像.jpg 4テキスト 教えて頂きたいのは、下記のように ランダム表示で４つのバナーを表示させたいのですが どうしたらいいか分かりません。 【ブラウザ】 4画像.jpg 4テキスト -------- 2画像.jpg 2テキスト -------- 1画像.jpg 1テキスト -------- 3画像.jpg 3テキスト 詳しい方おりましたらお教え頂けないでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- rel属性を複数使用したい
XHTML 1.0 Strictなのでtarget="_blank"の代用で外部jsに function externalLinks() { if (!document.getElementsByTagName) return; var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") anchor.target = "_blank"; } } window.onload=externalLinks; として読み込みリンクに<a rel="external" ..........>としています。 その他にhighslide.jsを使用しているのですがrel属性が重複しているためか highslide.jsの動作は正常なのですがtarget="_blank"の代用の効果がありません。 rel属性が重ならないようにしたいのですが解決策はありますでしょうか？ highslide.jsのURLです↓ http://vikjavev.no/highslide/
- 締切済み
- JavaScript
- かぶらないランダム画像
こんにちは。 現在ランダムに画像表示＋画像毎に各リンク＋マウスオーバーで画像切り替え を下記スクリプトで行っております。 function randomImage1() { img = new Array(); img[0] = "photo1.gif"; img[1] = "photo2.gif"; img[2] = "photo3.gif"; img[3] = "photo4.gif"; n = Math.floor(Math.random()*2); url = 'URL1 URL2'.split(' '); document.write('<a href="'+url[n]+'" target="_top"><img src="'+img[n]+'" border="0" onMouseOver="this.src=\''+img[n-0+2]+'\'" onMouseOut="this.src=\''+img[n]+'\'" onClick="location.href=\''+url[n]+'\'"></a>'); } ここで相談です。さらにこのソースを改造して 重複しないでランダムに画像表示させたいのですが、 どこをどう改造すれば良いかアドバイス宜しくお願い致します。
- ベストアンサー
- 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
- 2箇所にランダムに広告を表示したい。
上手く行かないので質問させてください。 ページの上下に広告をランダムで表示させたいのですが、 どのようにやるのか分かりません。 1箇所だけ表示することはできましたが、2箇所表示させようとすると何も表示されない状態です。 ---- HTML ----- <html> <head> <script type="text/javascript" src="banner.js"></script> </head> <body onload="Banner()"> <div id="banner" align="center"></div> <br> 本文ゴニョゴニョ．．． <div id="banner" align="center"></div> <br> </body> </html> ----- banner.js ----- function Banner(){ var imgMax = 10; var imgRand = Math.floor(Math.random() * imgMax); switch (imgRand) { case 0: banner.innerHTML='広告その１<br>'; banner.innerHTML+='<a href="・・・" target="_blank"><img src="・・・"></a>'; break; --- 略 ---- id="banner"が2つあるのは×というのは分かりますが(一つ消すと表示されるので)、 こういう場合はどのように処理をしたほうが良いでしょうか。
- 締切済み
- JavaScript
- 1ページに複数ランダム画像表示で重複しないスクリプトを探しています
タイトルの通り、1ページに複数設置しても重複しないランダム画像表示スクリプトを探しています。 <img src="ランダムPHPのアドレス"><img src="ランダムPHPのアドレス"> のような感じにしても2個とも違う画像がでるものを探してます。 以前見つけたのですが失念してしまい、質問させていただくことになりました。 理想的なものは、画像のあるフォルダを指定するだけでいいものなんですが、1つ1つ画像を指定するものでも構いません。 PHPと限らずCGIでもいいです。 もし知ってらっしゃる方がいましたらよろしくお願いいたします。
- ベストアンサー
- PHP
- ランダムに画像を複数箇所表示させたい
ランダムに画像の表示を２カ所行いたいのですが どのようにスクリプト文を書けばいいのでしょうか rootに01.js 02.js 03.html [aaa]フォルダに aaa01.jpg aaa02.jpg [bbb]フォルダに bbb01.jpg bbb02.jpg というファイル配置と仮定して 03のファイルに同時に aaa01とaaa02のどちらかをランダム bbb01とbbb02のどちらかをランダムに表示させたいのですがうまくいきません。 どなたか01.js 02.js 03htmlの書き方のアドバイスをお願いできないでしょうか？よろしくお願いいたします。
- 締切済み
- JavaScript
- javascriptで画像をランダム表示させたい
javascriptで画像をランダム表示させたいと思い、下記ソースを記述しました。 下記ソースでは、画像をランダムに1枚ずつ表示するようになっています。 今回、1枚ずつではなく、50枚ある画像を10枚ずつランダムに表示させたいと思っています。下記ソースから修整するにはどのような考え方になるのか教えていただけませんか？ 単純に、 "img/1.jpg", の部分を "img/1.jpg,img/2.jpg,img/3.jpg,img/4.jpg,img/5.jpg", としてみたのですが違うみたいですし、、。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>20110720test</title> </head> <body> <script language="JavaScript"><!-- myImageCnt = 5; myImage = new Array( "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg" ) myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); // --></script> </body> </html>
- ベストアンサー
- JavaScript
- ランダムで画像変更
前回…http://oshiete1.goo.ne.jp/qa4475723.html <a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a> 形式の画像のランダム変更の仕方を教えて頂いたのですが、聞きそびれた質問があったので、質問させて頂きます。 <iframe src="XXX.html" frameborder="no" scrolling="no"></iframe> こういった形のフレーム形式の画像をランダムで表示させる場合はどうしたらよろしいでしょうか？ また <a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a> 形式のランダム表示と混ぜて表示させる方法をどのようにしたらよろしいのでしょうか？ 今回はこちらのサイトも参考にさせて頂きました。 http://www.red.oit-net.jp/tatsuya/java/
- 締切済み
- JavaScript
- バナーのランダム表示と外部リンク計測について
初めまして。 Java初心者です。よろしくお願い致します。 現在、自サイトにバナー画像がランダムで表示される様に貼り付けて、尚かつそれぞれのバナーがクリックされた回数を計測したいと考えています。 ランダム表示に関しては、現在以下のソースで対応させています。 <script type="text/javascript"> <!-- url = new Array(); img = new Array(); tar = 'target="_blank"'; url[0] = "画像1のリンク先URL"; img[0] = "画像1"; url[1] = "画像2のリンク先URL"; img[1] = "画像2"; N = Math.round(Math.random() * (url.length - 1)); DISP = "<a href='" + url[N] + "' " + tar + "> <img src='" + img[N] + "' border=0></a>"; --> </script> <script> <!-- document.write(DISP); --> </script> これに外部リンクへのクリック数を追う機能を追加するにはどうすればよいでしょうか？ 宜しくお願い致します！
- 締切済み
- JavaScript
お礼
お忙しいところ本当にありがとうございました。 ご指摘頂いたとおり、javascriptをもう少し勉強してから、 とりかかってみようと思います。 大変、失礼をいたしました。 助かりました。感謝いたしております。 ちょっとギリギリ自分でわかるところまで チャレンジしてみようと思います。 また少しして、すぐ質問しちゃうかもしれませんが…f(^^) またの機会によろしくお願いいたします。 ありがとうございました。