- 締切済み
画像をランダムに表示したい
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); これだけでは、だめなのでしょうか!?
- jojo3714
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- 田中 裕之（@bybalsendercase）
- ベストアンサー率88% (56/63)
すいません、画像の表示位置を忘れました。 document.getElementById("m").style.left document.getElementById("m").style.top でも指定できますが、スタイルシートで決めました。 <body> <input type="button" value="表示" onclick="strt()"> <img src="aaaa1.jpg" style="visibility:hidden;width:300px;height:200px;margin-left:200px;margin-top:200px;" id="m" /> <script type="text/javascript"> var img = new Array(); img[0] = new Image(); img[0].src = "aaaa1.jpg" img[1] = new Image(); img[1].src = "bbbb2.jpg" // プレゼント画像を描画 var r=0;//ランダムの値 function hyouji() { r = Math.floor((Math.random()) * 2);//ランダムの値 の生成 //画像を表示する document.getElementById("m").style.visibility = "visible"; //ランダム値によって画像を変更する document.getElementById("m").src = img[r].src; } //タイマーで画像のhyouji()を3秒ごとに呼び出す function strt() { setInterval("hyouji()", 3000); } </script> </body> 画像の配列は2段がまえにしてね。 あとint rはjavaとかc#の場合ですね、気持ちはわかりますがjavascriptの場合は付けないみたいです。
- 田中 裕之（@bybalsendercase）
- ベストアンサー率88% (56/63)
こんばんは ＞ おまけ画像の読み込み ＞プレゼント画像を描画 すいません、両者の違いはなんですか？ 画像を3秒ごとにランダム値によって入れ替えるサンプルです。 <body> <input type="button" value="表示" onclick="strt()"> <img src="aaaa1.jpg" style="visibility:hidden;" id="m" /> <script type="text/javascript"> var img = new Array(); img[0] = new Image(); img[0].src = "aaaa1.jpg" img[1] = new Image(); img[1].src = "bbbb2.jpg" // プレゼント画像を描画 var i;//ランダムの値 function hyouji() { i = Math.floor((Math.random()) * 2);//ランダムの値 の生成 //画像を表示する document.getElementById("m").style.visibility = "visible"; //ランダム値によって画像を変更する document.getElementById("m").src = img[i].src; } //タイマーで画像のhyouji()を3秒ごとに呼び出す function strt() { setInterval("hyouji()", 3000); } </script> </body>
関連するQ&A
- 画像のランダム表示
初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ 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
- 画像をランダムにスクリプト
ホームページを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
- 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
- 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
- javascriptで困っています。教えてください
canvasタグの画像の描画で困っています。 Imageオブジェクトを生成して、画像ファイルを先読みしておいて var aaa = new Image(); aaa.src = "img/item00.png"; var bbb = new Image(); bbb.src = "img/item01.png"; 配列に入れる var i = [aaa,bbb] 描画コンテキストの取得s取得して、画像を表示させる var canvas = document.getElementById('sample'); if (canvas.getContext) { var context = canvas.getContext('2d'); 座標(10, 10)(50, 50)の位置にイメージを表示 context.drawImage(aaa, 10, 10); context.drawImage(bbb, 50, 50); } としています。このあとクリックなどのきっかけで、画像の絵を入れ替えたいと思い、 var cha1 = i[0].src; var cha2 = i[1].src; i[0].src = cha2; i[1].src = cha1; もう一度描画させているのですが、うまくいきません。 cha1,cha2が取得できているかチェックすると、undifineとでます。 これでは、入れ替えることがでないのでしょうか？ 入れ替えるとしたらどのような方法があるのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像のランダム表示でサイズを指定する方法
ヘッダー画像を、下記のコードでランダム表示しています。 横2000px縦1000pxの画像を、横1000px縦500pxで表示したい場合、どのようにすればよいでしょうか？ <script language="JavaScript"> var imglist = new Array( "A.jpg" , "B.jpg" , "C.jpg" , "D.jpg" , "E.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> <noscript> <img src="A.jpg" alt="A.jpg" width="1000px" height="500px" border="0" /> </noscript> 上記コードの参照元：http://allabout.co.jp/gm/gc/23805/2/
- ベストアンサー
- JavaScript
- 任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？
任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？ よろしくお願い致します。 jQueryを使用して、複数の画像をランダムに配置する（読み込むごとに）というページを作成しております。 この場合、予め配置した画像の表示順番をランダムに変えるだけなので、任意のフォルダに数十枚の画像を入れておき、そこからランダムに数枚の画像を呼び出し、かつランダムに表示順番を変えることはできないものでしょうか。 例：images というフォルダに50枚の画像を入れておき、その中から10枚の画像をランダムに呼び出し、かつランダムに配置する。 いろいろ調べてみたのですが、知識が足りず理解出来なかったため質問させて頂きました。 お詳しい方がいらっしゃいましたら、どうかご教授頂けると幸いです。 ■現在のコードです。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function shuffle(list) { var i = list.length; while (i) { var j = Math.floor(Math.random()*i); var t = list[--i]; list[i] = list[j]; list[j] = t; } return list; } $(function() { $('#sbox').append(shuffle($('.hogehoge', '#box'))); }); </script> </head> <body> <div id="box"> <div class="hogehoge"><img src="1.jpg"></div> <div class="hogehoge"><img src="2.jpg"></div> <div class="hogehoge"><img src="3.jpg"></div> <div class="hogehoge"><img src="4.jpg"></div> <div class="hogehoge"><img src="5.jpg"></div> </div> </body> </html>
- ベストアンサー
- JavaScript
- 画像をランダムに表示するには
<script language=JavaScript> <!-- var img=new Array(); img[0]='画像1'; img[1]='画像2'; img[2]='画像3'; img[3]='画像4'; img[4]='画像5'; ran_gazo=Math.floor(img.length * Math.random()); document.write('<IMG SRC='+img[ran_gazo]+'>'); //--></script><!--scripted by shotyan@dreamcity--> というのを使いますよね？（あるサイトで見つけました）でも、画像があるべき場所に「×」がついて、画像が出ないんです・・ どうしたら画像がランダムに表示されるんでしょうか。 教えてください。 そして、その画像を右上に固定したいんです。 注文多くてごめんなさい。
- ベストアンサー
- 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
- ランダムで画像を表示させるには？
環境はFlashCS5で、アクションスクリプト3.0を使用しています。 ５枚の画像（インスタンス名：mc0～mc4）をランダムで表示させるムービーを制作しているのですが、 下記のスクリプトですと、ランダムで画像が表示されるのですが、画像の切り替えがループになってしまって、次から次へとランダムで画像が切り替わります。フレーム１に下記のスクリプトを記述し、フレーム１にムービーインスタンス「mc0」から「mc4」を配置しています。 function randomShowMC():void { for (var i:int=0; i<5; i++) { this["mc" + i].visible = false; } var rnd:int = Math.floor(Math.random() * 5); this["mc" + rnd].visible = true; } randomShowMC(); var myTimer:Timer = new Timer(3000); myTimer.addEventListener(TimerEvent.TIMER ,function(){randomShowMC()}); myTimer.start(); このスクリプトを改良？改造？して、ランダムの画像が１回のみ…つまり、おみくじみたいに、（mc0～mc4の画像を）ランダムで１回のみ画像を表示させたいのです…表示後の画像が切り替わらずそのままで停止させたいのです。 又は、ムービーインスタンス「mc0」から「mc4」の画像をランダムで表示させ、最初に表示された、その画像で停止させるスクリプトを新規に記述しても構いませんので、ご指導・アドバイスをお願い致します…。 どなたか、解る方がいましたらランダム画像表示で１回表示のみのループしないスクリプトを教えてください。よろしくお願い致します…。
- ベストアンサー
- Flash
お礼
早々のご返答有難うございます 修正してみますね