- 締切済み
こちらの質問を参考に同じ様に画像をランダムするものを作りました。
こちらの質問を参考に同じ様に画像をランダムするものを作りました。 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>
- carsea802
- お礼率25% (4/16)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- zeff
- ベストアンサー率69% (137/198)
順番をシャッフルして、その順に出力させます。 画像数が増減した場合を考えておきましたが、 固定なら/*または～*/のコメントアウトを外して そちらを使ってみてください。 画像位置が特定ブロック内に収まっておらず、 バラバラの場合でも使えるかも。 <script type="text/javascript"> function rdmImgLink(){ var imgs = document.getElementById("box").getElementsByTagName("IMG"); /*または var imgs = [ document.images["imgs0"], document.images["imgs1"], document.images["imgs2"]]; */ var i, len = imgs.length, n=[], rdm=[], links = [], L = len, r, tmp, x; //初期化 for( i = 0; i < len; i++ ){ n[i] = i; //0,1,2,.... rdm[i] = imgs[i].src; links[i] = imgs[i].parentNode.href;//imgの親ノード:Aのリンク先 } //シャッフル:Fisher-Yates法 while( L ){ r = Math.floor( Math.random() * L ); tmp = n[--L]; n[L] = n[r]; n[r] = tmp; } //出力 for( i = 0; i < len; i++ ){ x = n[i]; //シャッフルされた番号 imgs[i].src = rdm[x]; imgs[i].parentNode.href = links[x]; imgs[i].alt = "imgs" + x; } } //window.onload //@cc_on window./*@if(@_jscript_version<=5.8) attachEvent('on'+ @else @*/ addEventListener(/*@end @*/ 'load', function(){ rdmImgLink(); }, false ); </script> </head> <body> <div id="box"> <p><a href="0.html"><img name="imgs0" src="images/image0.jpg" alt="imgs0" width="190" height="40"></a></p> <p><a href="1.html"><img name="imgs1" src="images/image1.jpg" alt="imgs1" width="190" height="40"></a></p> <p><a href="2.html"><img name="imgs2" src="images/image2.jpg" alt="imes2" width="190" height="40"></a></p> </div> </body> </html>
- yuu_x
- ベストアンサー率52% (106/202)
<div> <a href="0.html"><img src="0.jpg" alt="test0"></a> <a href="1.html"><img src="1.jpg" alt="test1"></a> <a href="2.html"><img src="2.jpg" alt="test2"></a> <script type="text/javascript"> (function (doc) { (function (n, r) { var a, i, L, no; a = n.getElementsByTagName('A'); for (i = 0, L = a.length; i < L; ++i) { no = Math.floor(Math.random() * 100); r.call (a[i], 'href', no); r.call (a[i].getElementsByTagName('IMG')[0], 'src', no); } }) ( (function () { var n = doc.getElementsByTagName('SCRIPT'); return n[n.length-1].parentNode; }) (), function (a, no) { this[a] = this[a].replace(/\d+(\.[^.]+)$/, no + '$1'); } ); }) (document); </script> </div>
お礼
ありがとうございます。参考にさせていただきます。