- 締切済み
ランダム表示の画像とリンクのづれを修正したい
以前こちらで下記のようなjavascriptのリンク付画像のランダム表示方法を教えて頂きました。 画像は全部で20枚以上、表示枚数は8枚、総画像枚数分別々のリンク先を指定します。画像枚数分のhtmlページが存在し、全てのページにテンプレートで同じスクリプトが組み込んであり、それぞれのページに8枚の違う画像が表示され、そこから好きな画像をクリックすることで指定したリンクページにジャンプさせたいのです。 が…確認すると画像は8枚づつランダムに表示はされるのですが、画像とその画像に指定したリンクがづれる箇所があります。全部ではないのですが…どこで画像とリンクがづれているのかいつも決まっているわけでもなく全くわかりません。 Images.splice(k,1);のところだと思いイジってみたものの今度は画像の表示8枚の中で、同じ画像が 表示されてしまったりと、解決できませんでした。 どのように直せば画像をランダムに表示させてリンク先のづれを無くせるのか、よろしければどなたか教えて頂けると大変光栄です。 <head> <script type="text/javascript"> var imgcount=23; var viewcount=8; var Images = new Array(); var Link = new Array(); Link[0]="o00.htm"; Link[1]="o01.htm"; Link[2]="o02.htm"; ・・・・・・ Images[0] = './img/0.jpg'; Images[1] = './img/01.jpg'; Images[2] = './img/02.jpg'; ・・・・・・ function changeImage(){ for(i=0;i<viewcount;i++){ k = parseInt(Math.random() * Images.length); document.getElementById("a_"+i).innerHTML='<a href="'+Link[k]+'" target="_self"> <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> よろしくお願いいたします。
- pfam
- お礼率87% (7/8)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- nine999
- ベストアンサー率44% (512/1140)
Images.splice(k,1); これが何をしているのか判りませんが、その前までは同じｋを使っているので同じ値が画像とリンクで使われています。 もしかしたら、Images.splice(k,1);の中で画像を置き換えたりしているのかも知れません。 提示のスクリプトだけでみると、Images.splice(k,1);を取り外すと問題なく画像とリンクが正しく表示されるように見受けられます。
関連するQ&A
- リンク付バナーのランダム表示のづれを修正したい
以前こちらで、以下のようなそれぞれの画像にリンクを付けた画像をランダム表示させるjavaスクリプトを教えて頂き、ｈｔｍｌ上に記述しましたが、指定した画像とリンク先が途中づれてしまいます。 ページ数と用意した画像とリンク先は23、表示は8。すべて同じように記述された商品紹介ページです。ランダムに表示される画像からジャンプ先のページに行き、そのページ内の画像からまた別ページにジャンプを繰り返し確認したところ、途中で指定した画像とリンクにづれが出てきます。 ある一定のところでづれているのかどうかも、わからず、何故づれるのか？困っています。 どなたかお解かりの方、ご助力いただけないでしょうか？ 記述は以下のとおりです。 <script type="text/javascript"> var imgcount=23; var viewcount=8; var Images = new Array(); var Link = new Array(); Link[0]="f-00.htm"; Link[1]="f-01.htm";・・・ Images[0] = './../img/0.jpg'; Images[1] = './../img/1.jpg';・・・ </script> <body onload="changeImage()" > <table id="ramdom_box"> <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>
- ベストアンサー
- JavaScript
- リンク付き画像をランダムで。
色々試してみたのですが、どうも上手くいきません。 どなたかアドバイス頂けたらと、思います。 <TD>ごとにランダムでリンク付き画像を重複せず表示したいのですが、 どの様にしたら良いのでしょうか？ ソースで書くと、 <TABLE> <TR> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> </TABLE> で、８箇所ある各々の<TD>の中に、８つの違うリンク付き画像を表示させたいと思っております。 宜しくお願いします。
- 締切済み
- JavaScript
- 画像リンクをランダムに４つ表示する
このようなタグを使って、画像リンクのランダム表示を作成しました。 ((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でリンク画像のランダム更新表示
画像をランダム表示する方法はわかったのですが、 各画像にリンク設定したいのと、 各画像の大きさを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
- 画像をランダムに表示し、リンクもランダムにしたい
下記の通りにしたら、ランダムに画像が表示され、 クリックすれば画像とペアになっているアドレス先に飛ぶことは出来たのですが そのときのリンク先をランダムにすることは出来ないでしょか？ 例えば、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
- 画像をクリックして別の画像を変えたい
ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像（button.gif)自身が2.pngなどの画像に変わってしまいます。 <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(imageUrl){ document.images[0].src = imageUrl; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A> <TABLE BORDER="0"> <TR> <TD>ボタンを押すと下に画像が表示されます。</TD> </TR> <TR> <TD><IMG SRC="1.png"></TD> </TR> </TABLE> </BODY> </HTML> 原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img src="button.gif">で受け取ってしまっているというのはわかりました。（確認のため <IMG SRC="1.png"> を<A HREF>～</A>より上に持ってきたら思っていた動きになりました。） けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。
- ベストアンサー
- JavaScript
- HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
- 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
- 画像のランダム表示、及び画像毎のリンク設定に関して
こんにちは。 サムネールの画像が、最終的には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
- オンマウスで画像と文字を同時に任意の位置に表示したい
絵を閲覧するページで以下のようにしたいです。 1.リンク文字の上にマウスを置く 2.任意の位置に『画像』とその画像の下に『文章』が同時に表示される （何も記載されていない位置に表示されるようにしたいです） 3.マウスを離したら最後に表示したものが消えずにそのまま 画像だけ表示は一応できましたが、 文字と同時にというのはわかりませんでした。 それと何もないところに表示するのができませんでした。 以下、作ったソースです。 <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { var img0 = new Image(); img0.src = "gallery/0.png"; var img1 = new Image(); img1.src = "gallery/1.png"; var img2 = new Image(); img2.src = "gallery/2.png"; } function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // --> </SCRIPT> <!-- ↓ここからBODY --> <Table Border="0" Cellspacing="0" align="center" Width="907" style="line-height:18px;"> <Tr><Td Valign="top"> <Table Border="0" Width="300" Cellspacing="0" style="line-height:18px;"> <Tr><Td ColSpan="2"><Font Size="2"> イラスト </Td></Tr> <Tr><Td Width="10"> </Td><Td><Font Size="2"> <A HREF="gallery/0.png" onMouseOver="On('img0')">作品１</A><BR> <A HREF="gallery/1.png" onMouseOver="On('img1')">作品２</A><BR> <A HREF="gallery/2.png" onMouseOver="On('img2')">作品３</A><BR> </Td></Tr> </Table> </Td> <Td Width="500" Valign="top"> <IMG SRC="" NAME="def"> </Td></Tr> </Table> <!-- ↑ここまでBODY --> 作品を追加していく形式のページなので、 なるべくシンプルなソースでお願いします。
- 締切済み
- JavaScript
お礼
私の説明がわかりにくかったですね。 一度Images.splice(k,1);は取り外してみましたが、リンクは問題ないかったと思いますが、 表示がランダムになっていない？のかランダムになってるけど画像が重複してしまいます。 表示されるのは8枚、すなわち更新するたび8枚の画像＝8種類の画像が表示されるのが Images.splice(k,1);を取り除くと８枚の表示枠に5種類の画像といように重複されてしまいます。 他のスクリプトに置き換える方がいいのでしょうか？