- ベストアンサー
重複しないランダムリンクの表示位置
複数の画像の中から数個を選び、それを重複しないように表示し、尚且つ各画像に合った文章を表示したいのです。 それで、色々と調べて、以下のようなものを見つけました。 私が求めているものに極めて近いのですが、２～３変更したいのです。 しかし、どこをどうしたら良いの全くわかりません。 どなたか助けてください。 質問は３つあります。 一つ目は、画像をリンクにしたいということです。 二つ目は、文章を画像の下に持って来たいのです。 （画像、文章、画像、文章・・・の順に縦に表示されるように） 三つ目は、文章もリンクにしたいということです。 三つ目はできればで構いませんが、一つ目と二つ目は必須でお願いします。 初心者なものですから、わかりやすく教えて頂けるとありがたいです。 よろしくお願いします。 記述は以下の通りです。 <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test ２３区外</title> <script type="text/javascript"> <!-- function createGalleryTable() { //表に表示する数を指定 var n = 6; //画像のURL var img = [ 'samp1.jpg', 'samp2.jpg', 'samp3.jpg', 'samp4.jpg', 'samp5.jpg', 'samp6.jpg', 'samp7.jpg', 'samp8.jpg' ]; var inum = img.length; //画像の代替テキスト var alt = [ '画像a', '画像b', '画像c', '画像d', '画像e', '画像f', '画像g', '画像h' ]; //画像とセットで表示する文章（画像と個数を合わせる） var str = [ '１番目の文章が表示されます。', '２番目の文章が表示されます。', '３番目の文章が表示されます。', '４番目の文章が表示されます。', '５番目の文章が表示されます。', '６番目の文章が表示されます。', '７番目の文章が表示されます。', '８番目の文章が表示されます。' ]; //画像・文章の個数と同じだけ数字を配列に入れる //この例だと [0, 1, 2, 3, 4, 5, 6, 7] という配列ができる var num = new Array(); for(var i = 0; i < inum; i++) num[i] = i; //上で作った配列の中身をランダムに並び替える //並び替えなので、数字は重複しません for(var j = inum - 1; j >= 0; j--) { var r = Math.floor(Math.random() * inum); var tmp = num[j]; num[j] = num[r]; num[r] = tmp; } //並び替えた配列の先頭から、ほしい数だけ抜き取る var result = num.splice(0, n); //表を作成し、指定箇所に挿入する var target = document.getElementById('galleryArea'); var table = document.createElement('table'); for(var k = 0; k < n; k++) { var row = table.insertRow(k); var rImg = new Image(); rImg.src = img[result[k]]; rImg.alt = alt[result[k]]; var cell1 = row.insertCell(0); cell1.appendChild(rImg); var text = document.createTextNode(str[result[k]]); var cell2 = row.insertCell(1); cell2.appendChild(text); } target.appendChild(table); } if(window.addEventListener) { window.addEventListener('load', createGalleryTable, false); } else if(window.attachEvent) { window.attachEvent('onload', createGalleryTable); } //--> </script> <div id="galleryArea"></div>
- ayana_kizu
- お礼率55% (10/18)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは。 表示内容やスタイルをHTMLやCSSで自由に設定できるように、スクリプトの処理内容をを限定化してみました。 galleryArea内の子要素のdivの順序をランダムにし、指定数だけ表示する機能だけにしたものです。 表示する内容はHTMLで好きに記載できますし、スタイルもCSSなどで指定しておけばよろしいかと… また、各divの内容は必ずしも同じ形式のものである必要はありません。 （例では、各divの上下の間隔を少し広げています） イベントの組込み方法は、ご質問文のものをそのまま利用しています。 <html> <head> <style type="text/css"> #galleryArea div { margin-bottom:12px; } </style> <script type="text/javascript"> function setGallery() { var n = 6; // ←表示する数を指定 var ga, i = -1, j = 0, e = [], tmp; ga = document.getElementById('galleryArea'), elm = ga.childNodes; while (elm[++i]) if (elm[i].nodeName=='DIV') e[j++]=elm[i]; if (n>e.length) n = e.length; for (i=0; i<e.length; i++) { j = Math.floor(Math.random() * e.length); tmp = e[i], e[i] = e[j], e[j] = tmp; } for (i=0; i<e.length; i++) { ga.appendChild(e[i]); if (i>=n) e[i].style.display = 'none'; } } if(window.addEventListener) { window.addEventListener('load', setGallery, false); } else if(window.attachEvent) { window.attachEvent('onload', setGallery); } </script> </head> <body> <div id="galleryArea"> <div><a href="#a1"><img src="sampl1.jpg" alt="画像a"></a> <br><a href="#a2">1番目の文章表記</a></div> <div><a href="#b1"><img src="sampl2.jpg" alt="画像b"></a> <br><a href="#b2">2番目の文章表記</a></div> <div><a href="#c1"><img src="sampl3.jpg" alt="画像c"></a> <br><a href="#c2">3番目の文章表記</a></div> <div><a href="#d1"><img src="sampl4.jpg" alt="画像d"></a> <br><a href="#d2">4番目の文章表記</a></div> <div><a href="#e1"><img src="sampl5.jpg" alt="画像e"></a> <br><a href="#e2">5番目の文章表記</a></div> <div><a href="#f1"><img src="sampl6.jpg" alt="画像f"></a> <br><a href="#f2">6番目の文章表記</a></div> <div><a href="#g1"><img src="sampl7.jpg" alt="画像g"></a> <br><a href="#g2">7番目の文章表記</a></div> <div><a href="#h1"><img src="sampl8.jpg" alt="画像h"></a> <br><a href="#h2">8番目の文章表記</a></div> <div><a href="#i1"><img src="sampl9.jpg" alt="画像i"></a> <br><a href="#i2">9番目の文章表記</a></div> </div> </body> </html>
お礼
なるほど・・・ こういうやり方もあるのですね。 とっても参考になりました。 ありがとうございます。
- babu_baboo
- ベストアンサー率51% (268/525)
http://www.google.co.jp/search?complete=1&hl=ja&source=hp&q=css+%E9%96%93%E9%9A%94%E3%82%92%E7%8B%AD%E3%82%81%E3%82%8B&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq= http://www.google.co.jp/search?complete=1&hl=ja&safe=off&num=100&newwindow=1&q=%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E6%96%B0%E3%81%97%E3%81%84%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A7%E9%96%8B%E3%81%8F%E3%81%AB%E3%81%AF&btnG=%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq= すこしは・・・
お礼
参考にさせて頂きました。 ありがとうございます。
- babu_baboo
- ベストアンサー率51% (268/525)
ごめんなさい。きづいてみたら、わかりにくくなってました。^^; ぜんかくくうはくは、はんかくになおしてね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <style type="text/css"> #galleryArea div { border : 2px outset; width : 400px; margin : 10px; } #galleryArea div a img { display : block; border : none; } </style> <body> <div id="galleryArea"> </div> <script type="text/javascript"><!-- (function ( random, tag ) { var n = 6; var part = [ [ 'samp1.jpg', '画像a', '１番目の文章が表示されます。', 'http://www.jp' ], [ 'samp2.jpg', '画像b', '２番目の文章が表示されます。', 'http://www.jp' ], [ 'samp3.jpg', '画像c', '３番目の文章が表示されます。', 'http://www.jp' ], [ 'samp4.jpg', '画像d', '４番目の文章が表示されます。', 'http://www.jp' ], [ 'samp5.jpg', '画像e', '５番目の文章が表示されます。', 'http://www.jp' ], [ 'samp6.jpg', '画像f', '６番目の文章が表示されます。', 'http://www.jp' ], [ 'samp7.jpg', '画像g', '７番目の文章が表示されます。', 'http://www.jp' ], [ 'samp8.jpg', '画像h', '８番目の文章が表示されます。', 'http://www.jp' ] ]; var d = document, t = d.getElementById( 'galleryArea' ), k, o, DIV, A, IMG; part.sort( random ).sort( random ); while( o = part[--n] ) { A = tag( 'A', (IMG = tag( 'IMG' ), IMG.src = o[0], IMG.alt = o[1], IMG) ); t.appendChild( tag( 'DIV', (A.href = o[3], A.appendChild( d.createTextNode( o[2] ) ), A) ) ); } })( function ( ) { return Math.random() < 0.5; }, function ( t, c ) { var d = document, n = d.createElement( t ); c && n.appendChild( 'object' === typeof c ? c: d.createTextNode( c ) ); return n; } ); //--> </script>
補足
早速の回答、ありがとうございます。 私の望んでいたものが出来そうです。 質問なのですが、それぞれの間隔を狭める（空白を少なくする！？）にはどうすればよいのでしょうか？ あと、もうひとつ・・・ リンクを新しいページで開くにはどうすればよいでしょうか？ ずうずうしいですが、よろしくお願いします。
お礼
やりたかった通りにできました！！！ 本当にありがとうございます。 これを機に私も色々勉強してみます。 お世話になりました。