• 締切済み

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>

  • aaiok
  • お礼率34% (35/101)

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.6

何度か、読み直すように指摘したつもりですが、ろくに読んではいらっしゃらないようですね… ＞#2#3で回答頂いた方法を試したところ、文章を表示できない。 試しているとは思えません。 文章でも説明した（つもりですが）ように、#3は確かにできませんが#2はできるはず。 ＞１．現在、数百ページに及ぶＷＥＢサイトに更新の度に切り替わる画像バナーを掲載したい。 同じものを各ページに埋め込む方法として他にincludeと言われる方法があります。 SSIが代表的。最近ならPHPを利用するところかも。 （javascriptのようにユーザの設定に影響されない） まぁ、どうしても使いたいのなら、フレームを使うのは本人の自由ですが… （DTDの確認もお忘れなく）

aaiok
質問者

補足

＃２の方法で無事にできました。有難うございました。 #2の訂正が＃３と思い、＃３しか試しておりませんでした。 もし宜しければ、#2の方法で現在画像をランダム表示にしておりますが、ランダム表示の表示割合を画像によって変更する方法をご存知でしたら、今回の質問で一緒に解決しておきたいので、＃２のソースに付け足す形でソースを示して頂ければ大変助かります。 宜しくお願い致します。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.5

#1～4です。 なんか、まったく誤解されているようですが、1～4の回答全てフレームを考えてはいません。 なぜなら、フレーム自体が非推奨とされているからです。（お使いになるのは自由ですが） それなので、ご質問の『フレームうんぬん』に関しては意味がよくわかりません。 ＞それぞれに７つの画像とリンクを付けるとなると、35個分のHTML ＞ソースを書かなければなりません。当然容量も増えます。 javascriptにしたところで、同じような内容のデータを持たなければならないので、全体の容量という観点からはほとんど差が無いと思います。 また、最近のネットワークの整備状況を考えれば、高々数十行の文字データの容量が大きな影響を与えるとは考え難いのですが…？ ＞#2と#3は、フレーム使用をすることのみでwebページ上で文章と一緒に実用できそうですね 再度書きますが、フレームの使用は考慮していません。 フレームをまたいでスクリプトを使用する場合等は、若干の修正が必要です。 ＞#3の方法を用いてフレーム処理をする方法しかないのでしょうか？ ＞すると、フレームを結構使うことになりそうですが・・・。 質問の意味がわかりません。 そもそも、フレームを使うか使わないかは文章をどのように構成するかによって決まるはずです。 HTMLソースとしてどの様にマークアップしておくのが良いかも、全体の文章構成・内容から決まってくるはずと思います。 その構成に基づいて、スクリプトを用いる場合はどのように処理をするかを決めるべきです。 （質問者様がどのような内容を、どのような構成でどのように表示したいのか、私は知りません） ただ、ご質問の内容はみな、フレームなしでも実現できることのように思えますが…？ ＞#3の画像のリンクですが、別窓で開きたい場合 #3そのままでは無理です。(理由は、#4参照）修正すれば当然可能になります。 #1、#2、#3、それぞれのスクリプトの考え方の違いは#4に記しましたので、よく御確認ください。 ＞それとも、外部のスクリプト内で定義されているdata配列で、 「同じことをdataで重複して定義することは容量の無駄になる」ことは#4に説明してありますが、容量を気になさるのであれば、そのような無駄こそを省くべきではないですか。

aaiok
質問者

補足

フレーム非推奨は知っておりますが、ＷＥＢページを作成するためには、文章も一緒に記載したいです。しかし、#2#3で回答頂いた方法を試したところ、文章を表示できない。これでは、ＷＥＢページの意味を持たず、画像のみのＷＥＢページになってしまいます。従って、#2#3の方法で文章と一緒に画像を表示するには、フレームしか手がないということです。 また、#1の方法では、画像のHTMLソースをＷＥＢページに記述する為、複数のページに同じ更新のたびに変わる画像を掲載する場合、複数のＷＥＢページに同じ記述しなければなりません。ここまではいいでしょう。しかし、ページ数が数百ページに及ぶ場合、先に設定した画像を別の画像に変更する場合に、数百ページ分変更しなければなりません。これでは、時間がいくらあっても足りません。 少しわかりずらい部分もあったので簡潔にどのような構成にしたいか下記に記述しときたいと思います。 １．現在、数百ページに及ぶＷＥＢサイトに更新の度に切り替わる画像バナーを掲載したい。 ２．更新のたびに切り替わる画像のリンク、ＵＲＬ、名前、幅、高さ、ボーダー、別窓で開く等を外部JavaScriptでしたい 3.更新のたびに切り替わる画像と一緒に文章や他の画像も掲載したい。 ４．ＨＴＭＬソースはできるだけ少なくして、外部JavaScriptを反映させる形にしたい。 ５．数百ページに全て掲載する為、たとえば、Yahoo.Japanのようにトップページの右上の広告バナーのように、画像の変更をスクリプト内で完結できるようにしたい（理由は、数百ページ全てに画像ソースを記述した場合、画像を変更するたびに数百ページを変更しなくてはならない為） 以上ですが、宜しくお願い致します。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

#3です。 ＞１.下記のように、HTMLページ（sample）の画像タグの下に ＞文字やJavaScriptの影響を受けない画像を記載したところ、 ＞両方とも表示されない問題が発生しました。 回答の#2、#3は、#1の補足にあった『ソースはできるだけ少なくして』というのを目標にしたので、質問でご提示のスクリプトと同じようにURIやサイズをスクリプト側で定義する方式をとっています。（#1の回答とは方法が異なります） それなので、スクリプト内で定義されているdata配列に、『リンク先のURI、画像のアドレス、画像のALT、画像のwidth、画像のheight』の順で設定しておかないと思うようには動作しません。 また、#2と#3は同じような方法（少し違いますが）をとってはいるものの、#3では、#1の補足のHTMLに決め打ちにしてしまうことで（「できるだけ少なく」だったので、例示のままのリンクと画像のみなのだと思いました）、さらに短いHTMLとなるようにしてみたものです。 #3では例示の構成以外のソースは想定していません。どのようなソースを作成したとしてもキャンセルしてしまうので、スクリプトが動作する環境では表示されるのは画像とリンクのみになります。 他の要素も記述したいのであれば、#2のid付きのものをご利用ください。（こちらはid要素内のみが影響を受けます） （実際には、#2ではHTMLに記述された要素の属性を変更していますが、#3ではHTMLに記述された内容を一旦消去して、新たに画像とリンク要素を生成しています。） ＞２.画像のリンクに青い枠ができてしまうので、消したい場合、 ＞JavaScriptの表記は下記のもので正しいでしょうか 正しいです。 もっと細かく言うならば、 　borderWidth = "0px"　か　borderStyle = "none"; でしょうか。 でも、必ず消すのでしょうから、わざわざdataに同じ値を重複して設定しておく必要はないと思われます。 選ばれた画像がなんであれ、枠線には一律に"0px"などを設定してあげればよいのですから。 #2を利用する場合は、枠線をスクリプトで設定しなくてもあらかじめCSSで設定しておくことでもそのまま指定に従います。（変更されるのは、width、heightのみです）

aaiok
質問者

補足

回答有難うございました。 少し整理して色々考えていて、返答が遅れて申し訳御座いませんでした。 #2と#3は、フレーム使用をすることのみでwebページ上で文章と一緒に実用できそうですね。 #1は、画像をたくさん使いたい場合、HTMLソース<ul><li>を用いてたくさん書かなければならず、ページの容量が増えて重くなるのが難点ですね。たとえば、更新するごとに、画像が変化する画像を5つほど表示したとして、5つそれぞれに７つの画像とリンクを付けるとなると、35個分のHTMLソースを書かなければなりません。当然容量も増えます。 なるべく、#3のように外部で、『リンク先のURI、画像のアドレス、画像のALT、画像のwidth、画像のheight』等を指定し、かつ、文章や他の画像と一緒に用いるためには、#3の方法を用いてフレーム処理をする方法しかないのでしょうか？すると、フレームを結構使うことになりそうですが・・・。 あと、#3の画像のリンクですが、別窓で開きたい場合、 <!DOCTYPE html> <title>sample</title> <a href="A.html"> <img src="A.jpg" alt="AAA"　target="_blank"> </a> と普通にtarget="_blank"タグを入れればよいのでしょうか？ それとも、外部のスクリプト内で定義されているdata配列で、 指定可能でしょうか？ 以上ですが宜しくお願致します。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

#1、#2です。 内容も決めうちでよいので、idも不要でしたね。 <!DOCTYPE html> <title>sample</title> <a href="A.html"> <img src="A.jpg" alt="AAA"> </a> ----外部スクリプト--- /*@cc_on@*/ window./*@if(1)attachEvent('on'+@else@*/addEventListener( /*@end@*/'load', function(){ 　var data = [ 　　["A.html", "A.jpg", "AAA", 400, 200], 　　["B.html", "B.jpg", "BBB", 100, 100], 　　["C.html", "C.jpg", "CCC", 300, 300], 　　["D.html", "D.jpg", "DDD", 200, 200] 　]; 　var d = data[Math.floor(Math.random() * data.length)], 　　　a = document.createElement("a"), 　　　img = document.createElement("img"), 　　　t, b = document.body; 　a.appendChild(img); 　a.href = d[0]; 　img.src = d[1]; 　img.alt = d[2]; 　img.style.width = d[3]+"px"; 　img.style.height = d[4]+"px"; 　while(t=b.firstChild) b.removeChild(t); 　b.appendChild(a); }, false);

aaiok
質問者

補足

回答有難うございます。 早速、上記を使ってみましたが、いくつか問題点および疑問点が発生致しましたので、下記に記述しときたいと思います。 １.下記のように、HTMLページ（sample）の画像タグの下に文字やJavaScriptの影響を受けない画像を記載したところ、両方とも表示されない問題が発生しました。 <!DOCTYPE html> <title>sample</title> <a href="A.html"> <img src="A.jpg" alt="AAA"> </a> <br> 下の画像が表示されない<br> <a href="Ｘ.html"> <img src="Ｘ.jpg" alt="ＸＸＸ"> </a> <br> 表示されない文字 ２.画像のリンクに青い枠ができてしまうので、消したい場合、JavaScriptの表記は下記のもので正しいでしょうか？一応、枠は消すことができました。 ----外部スクリプト--- /*@cc_on@*/ window./*@if(1)attachEvent('on'+@else@*/addEventListener( /*@end@*/'load', function(){ 　var data = [ 　　["A.html", "A.jpg", "AAA", 400, 200, 0], 　　["B.html", "B.jpg", "BBB", 100, 100, 0], 　　["C.html", "C.jpg", "CCC", 300, 300, 0], 　　["D.html", "D.jpg", "DDD", 200, 200, 0] 　]; 　var d = data[Math.floor(Math.random() * data.length)], 　　　a = document.createElement("a"), 　　　img = document.createElement("img"), 　　　t, b = document.body; 　a.appendChild(img); 　a.href = d[0]; 　img.src = d[1]; 　img.alt = d[2]; 　img.style.width = d[3]+"px"; 　img.style.height = d[4]+"px"; 　img.style.border = d[5]+"px"; 　while(t=b.firstChild) b.removeChild(t); 　b.appendChild(a); }, false);

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

#1です。 ＞メインのHTML（sample1.html）ソースはできるだけ少なくして、 ＞フレーム(sample2.html)とJavaScript(sample.js)の外部出力 ＞で作りたいのですが フレームを使用する意味が不明ですが、ソースを極力少なくというのならスクリプトオフの場合の表示だけを記述して、後はスクリプトで書き換えると言う風にでもすればよいのでは？ <!DOCTYPE html> <title>sample</title> <div id="randomImage"> <a href="A.html"> <img src="A.jpg" alt="A" style="width:400px; height:200px;"> </a> </div> ----外部スクリプト--- （全角空白は半角に） /*@cc_on@*/ window./*@if(1)attachEvent('on'+@else@*/addEventListener( /*@end@*/'load', function(){ 　var data = [ 　　["A.html", "A.jpg", "A_img", 400, 200], 　　["B.html", "B.jpg", "B_img", 100, 100], 　　["C.html", "C.jpg", "C_img", 300, 300], 　　["D.html", "D.jpg", "D_img", 200, 200] 　]; 　var d = data[Math.floor(Math.random() * data.length)], 　　　e = document.getElementById("randomImage"), 　　　img = e.getElementsByTagName("img")[0]; 　e.getElementsByTagName("a")[0].href = d[0]; 　img.src = d[1]; 　img.alt = d[2]; 　img.style.width = d[3] + "px"; 　img.style.height = d[4] + "px"; }, false);

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ご提示の方法を拡張して、リンク先や画像のサイズを配列に定義しておく方法もあるかと思いますが… 先にHTMLソースに全部記載しておいて、そのうちの一つを表示するという方法ではいかがでしょうか？ スクリプトがオフの場合はクラスactiveの画像が表示され、スクリプトがオンの場合はランダムな表示になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #randomImages, #randomImages li { list-style-type:none; padding:0; margin:0; } #randomImages li { display:none; } #randomImages li.active { display:block; } </style> </head> <body> <ul id="randomImages"> <li class="active"> <a href="A.html"> <img src="A.jpg" alt="A" style="width:400px; height:200px;"> </a></li> <li><a href="B.html"> <img src="B.jpg" alt="B" style="width:100px; height:100px;"> </a></li> <li><a href="C.html"> <img src="C.jpg" alt="C" style="width:300px; height:300px;"> </a></li> <li><a href="D.html"> <img src="D.jpg" alt="D" style="width:200px; height:200px;"> </a></li> </ul> <script type="text/javascript"> <!-- (function(){ var list = document.getElementById("randomImages").getElementsByTagName("li"); var i, e, n = Math.floor(Math.random() * list.length)+1; for(i=0; e=list[i++];) e.className = i==n?"active":""; })(); //--> </script> </body> </html>

aaiok
質問者

お礼

丁寧な回答有難う御座いました。 メインのHTML（sample1.html）ソースはできるだけ少なくして、フレーム(sample2.html)とJavaScript(sample.js)の外部出力で作りたいのですが、その場合以下のようにすれば良いでしょうか？ ご教授頂ければ幸いです。 【ＨＴＭＬソース sample1.html】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>sample1</title> </head> <body> <iframe src="sample2.html" width="200" height="200" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" allowtransparency="true"></iframe> </body> </html> 【外部ＨＴＭＬソース sample2.html】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>sample2</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #randomImages, #randomImages li { list-style-type:none; padding:0; margin:0; } #randomImages li { display:none; } #randomImages li.active { display:block; } </style> </head> <body> <ul id="randomImages"> <li class="active"> <a href="A.html"> <img src="A.jpg" alt="A" style="width:200px; height:200px;"> </a></li> <li><a href="B.html"> <img src="B.jpg" alt="B" style="width:200px; height:200px;"> </a></li> <li><a href="C.html"> <img src="C.jpg" alt="C" style="width:200px; height:200px;"> </a></li> <li><a href="D.html"> <img src="D.jpg" alt="D" style="width:200px; height:200px;"> </a></li> </ul> <script type="text/javascript"> <!-- (function(){ var list = document.getElementById("randomImages").getElementsByTagName("li"); var i, e, n = Math.floor(Math.random() * list.length)+1; for(i=0; e=list[i++];) e.className = i==n?"active":""; })(); //--> </script> </body> </html> 【JavaScriptの外部出力 sample.js】 sample2.htmlへの記述と sample.jsの記述がわかりません

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ランダム表示とリンクの貼り付け

    数百の画像を、ランダムにダブらないで表示させるのはできたのですが （画像名は整理しやすい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"> だと１つしかランダムにならずに、 あとの２つは画像が表示されません。 何を変えたらいいでしょうか？ よろしくお願いします。

  • 更新ごとに重複しない画像を5枚表示

    初心者です。よろしくお願い致します。 複数ページ存在するうちの、各ページを更新するごとにランダムに変わる、重複しない5枚の画像を表示させたいと思います。 今現在、サイト上に掲載されてあったJavaScriptのサンプルを自分なりに変更してテストしているのですが、「重複しない」というところで壁にぶち当たってしまっています。 下記が現在のスクリプトです。 <body> <script language="JavaScript"><!-- jumpURL = new Array(); imgURL = new Array(); jumpURL[0] = "アドレス"; jumpURL[1] = "アドレス jumpURL[2] = "アドレス"; jumpURL[3] = "アドレス"; jumpURL[4] = "アドレス"; jumpURL[5] = "アドレス"; jumpURL[6] = "アドレス"; jumpURL[7] = "アドレス"; imgURL[0] = "top_img01.jpg"; imgURL[1] = "top_img02.jpg"; imgURL[2] = "top_img03.jpg"; imgURL[3] = "top_img04.jpg"; imgURL[4] = "top_img05.jpg"; imgURL[5] = "top_img06.jpg"; imgURL[6] = "top_img07.jpg"; imgURL[7] = "top_img08.jpg"; a = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[a]+"'>"); document.write("<img src='"+imgURL[a]+"' border='0'><br>"); document.write("</a>"); b = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[b]+"'>"); document.write("<img src='"+imgURL[b]+"' border='0'><br>"); document.write("</a>"); c = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[c]+"'>"); document.write("<img src='"+imgURL[c]+"' border='0'><br>"); document.write("</a>"); d = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[d]+"'>"); document.write("<img src='"+imgURL[d]+"' border='0'><br>"); document.write("</a>"); e = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[e]+"'>"); document.write("<img src='"+imgURL[e]+"' border='0'><br>"); document.write("</a>"); // --></script> </body> 現在では、画像枚数が8枚ですが、4、50枚に増える予定です。 また、スクリプトを書きやすくするために画像ファイルの名前をどのように変更してもかまわないと思っています。 上記のスクリプトは5枚の画像が表示されることはされるのですが、更新してから表示するまでの待ち時間が長いのが気になるので、できれば、欲を言うならば、早く表示してくれるようなスクリプトをご伝授していただければと思います。 よろしくお願い致します。

  • 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); } テキストリンクを押してインラインフレーム内の画像を変更していきたいのですが。。。順番にすると真っ白になってしまいます。。。 どなたか解決方法よろしくお願いします。

  • 画像リンクをランダムに４つ表示する

    このようなタグを使って、画像リンクのランダム表示を作成しました。 ((hard内)) <script type="text/javascript"><!-- // var imglist = [ [ "画像1", "", "リンク先1" ] , [ "画像2", "", "リンク先2" ] ]; function RandomImageLink() { // var selectnum = Math.floor(Math.random() * imglist.length); // var output = '<a href="' + imglist[selectnum][2] + '">' + '<img src="' + imglist[selectnum][0] + '"' + ' alt="' + imglist[selectnum][1] + '"><br>' + imglist[selectnum][1] + '</a>'; // document.write(output); } // --></script> ((body内)) <script type="text/javascript"><!-- RandomImageLink(); // --></script> こうしてランダムに表示できるようになったのですが、私は『ランダムに1つ表示』ではなく、『ランダムに4つ表示』にしたいのです。 …どうすればいいのでしょうか？ どなたか回答をお願いします。

  • javascriptで画像のランダム表示設定

    いつもお世話になっております。 過去に類似した質問が挙げられてましたが、 解決に至らなかったので、 質問させて頂きます。 javascriptを使用して、 ３枚の画像をランダム表示されるように設定したいと思っております。 できれば、更新毎に常に異なる画像が表示されるようにしたいです。 ちなみに全体に適用ではなく、特定のボックスのみです。 こんな感じで現在は指定しております。 <div class="section1"> <img src="photo/xxx.jpg" alt="xxx" /> </div> ここのimgをランダム表示にしたいのですが、 どうも上手くいきません。 <script language="javascript"> <!-- // ランダムに画像を表示する img = new Array(); // 画像のアドレス img[0] = "photo/xxx.jpg"; img[1] = "photo/yyy.jpg"; img[2] = "photo/zzz.jpg"; n = Math.floor(Math.random()*img.length); document.write("<IMG src='"+img[n]+"' border='0'>"); document.write("</A>"); //--> </script> をbody内に挿入したのですが、 ダメでした。 ご指導の程宜しくお願い致します。 ちなみに当方、プログラムを自力で記述する能力が無いので、 できれば、ソースを明示して頂けると大変助かります。

  • Javascriptでランダムに画像を表示させる方法について

    画像をランダムに表示させる為にalphaEDIT v2.0.3に以下のようなスクリプトを貼り付けました。 しかし表示させる画像の位置を動かすことができません。どうすればよいでしょうか？ グーグルやおしえてgooで検索しましたが、わかりませんでした。 どうかご教授おねがいします。m(_ _)m <script language="JavaScript"> <!-- ranimg = new Array(); ranimg[0]="test1.jpg"; ranimg[1]="test2.jpg"; xx = Math.floor(ranimg.length*Math.random()); ranimg = ranimg[Math.floor(xx)]; document.write('<img src="'+ ranimg +'">'); // --> </script>

    • ベストアンサー
    • HTML
  • <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" />の書き方を直せばいいと思うのですが、 どのようにしたらいいのでしょうか？　よろしくお願いします。

  • ブログトップにランダムで画像を表示させる方法

    ブログのトップに画像をランダムで表示させたいと思っています。 テンプレートはfc2の共有プラグインのsimple04を使っています。 <script language=”JavaScript”> var images = new Array(); /* 画像URLを表示させたい分だけ書き込むこと */ images[0] = “”; images[1] = “”; images[2] = “”; images[3] = “”; images[4] = “”; images[5] = “”; images[6] = “”; var rnd = Math.floor((Math.random() * 100)) % images.length; document.write(‘<img src=’,images[rnd],’ border=”0″>’); </script> 自分で調べてみてこのタグを使えばいいことはわかったのですが、 HTMLの所に貼るのかCSSのところに貼るのかわかりません。 回答よろしくお願いします。

  • 画像をランダムに表示し、リンクもランダムにしたい

    下記の通りにしたら、ランダムに画像が表示され、 クリックすれば画像とペアになっているアドレス先に飛ぶことは出来たのですが そのときのリンク先をランダムにすることは出来ないでしょか？ 例えば、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>");

  • 画像のランダム表示、及び画像毎のリンク設定に関して

    こんにちは。 サムネールの画像が、最終的には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個近くになり、リンク先もサムネール画像と同じ数になりますので、リンク先は別ファイルで管理出来るようになれば嬉しく思います。 アドバイスか、ヒントを頂ければと思います。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する