- ベストアンサー
JavaScriptでランダムなリンクを作成する方法とは？
- JavaScriptを使用して、ランダムなリンクを表示する方法を教えてください。
- 画像と文章を組み合わせてランダムに表示する方法を知りたいです。
- 特定の条件を満たすようにランダムなリンクを生成する方法を教えてください。
- cococomail2
- お礼率35% (28/80)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
方法はいろいろあると思いますので、一例として… サンプルは以下のような方法です。 HTML内に非表示で10種類（？）のリストを定義しておいて、そのなかからスクリプトで指定セットだけ選んだものを、top、left、rightへコピーしています。 rightの内容を文章だけにする際に、liの最初の要素がimgだったらそれを省くようにしていますので、文章中にimgがあってもそれは残ります。 なお、CSSはかなりいい加減ですので、きちんとしたものと取り替えてください。 <html> <head> <style type="text/css"> ul.def { margin-left:0; padding-left:0;} ul.def li { list-style:none outside; width:100%;} ul.def li img{ width:145px;} #define { display:none;} #top { width:100%;} #top ul li { width:150px; float:left;} #bottom div{ float:left;} #left { width:150px;} #left ul.def li { width:150px;} #right { padding-left:50px;} </style> <script type="text/javascript"> window.onload = function() { var i, max=3; //←表示する要素数 var elm = document.getElementById('define').getElementsByTagName('UL')[0].cloneNode(true); var list = elm.getElementsByTagName('LI'); while(list.length>max) elm.removeChild(list[Math.floor(Math.random()*list.length)]); document.getElementById('top').appendChild(elm.cloneNode(true)); document.getElementById('left').appendChild(elm.cloneNode(true)); for (i=0; i<list.length; i++){ if (list[i].firstChild.nodeName=='IMG') list[i].removeChild(list[i].firstChild); } document.getElementById('right').appendChild(elm); } </script> </head> <body> <!-- 画像・文章セットの定義 --> <div id="define"> <ul class="def"> <li><img src="A.jpg"><div>文章A</div></li> <li><img src="B.jpg"><div>文章B</div></li> <li><img src="C.jpg"><div>文章C</div></li> <li><img src="D.jpg"><div>文章D</div></li> <li><img src="E.jpg"><div>文章E</div></li> </ul> </div> <!-- ここまで --> <div id="top"></div> <hr> <div id="bottom"> <div id="left"></div> <div id="right"></div> </div> </body> </html>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
No1です。 ＞一画面に縦のもの、横のもの、文字のものの一つだけを表示させた ＞かったのです。 それなら、わざわざ同じ内容のHTMLソースを3箇所も作成する必要はありません。 見え方の違いだけなので、一つのソースに対して、適応させるCSSを切替えることで可能でしょう。 実際、No1の回答で生成されているHTMLソースも、横表示タイプと縦表示タイプはまったく同じもので、topとleftに対するCSSの違いで見え方が変わっているだけです。 画像抜きのタイプは、No1ではスクリプトで<img>タグを除去していましたが、これも表示しないだけなので、横型、縦型と同じソースのままでいけますね。 つまり、HTMLソースは同じままで、スタイルシートで横型や縦型あるいは文字のみいう風に使い分ければよいでしょうということです。 スタイルシート」、「CSS」などをキーに検索してみると、HTMLとCSSでどのように意味する内容を切り分けているかを確認できると思います。 もともとのご質問が、 ＞サンプルのようなものを作って頂きたいのです。 でしたので、一応、サンプルにはなったのではないかと思いますが？ （結果的に、サンプルのスクリプトでは、実際には必要なさそうな部分がいろいろあることになってしまいましたが…）
お礼
はい、とても参考になりました。 頑張って自分の目指すものを作ってみます。 本当にありがとうございました。
- nobuoka
- ベストアンサー率69% (23/33)
JavaScript が無効な状況でどのように動作させたいかにもよりますが、#1 の方の回答だと JavaScript が無効な状態ではすべてのリンクが表示されてしまうので、個人的にはあんまり好まれないんじゃないかなぁ、と思ったりします。 質問の内容から察するに、表示するリンクは副次的なものだと考えられるので、元々 HTML に書かれてある要素を JavaScript を削る、という方針ではなく JavaScript で新たな要素を生成して追加する、という方針の方がいいと思います。 それはともかく、#1 の方のサンプルを見て、横表示のものや文字表示のものの作り方をわからないようなら、業者に頼んで作ってもらった方がいいと思いますよ。 あと多重投稿もよくないかと。 Yahoo! 知恵袋 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1028571055
補足
えーっと、＃１の解答に補足できませんでしたので、こちらに失礼します。 fujillinさん、無知で申し訳ないです。 一画面に縦のもの、横のもの、文字のものの一つだけを表示させたかったのです。 ３ついっぺんにではなく、個別にということです。 わかりにくくてスイマセン。 あと、nobuokaさん、他の質問サイトであっても多重投稿になるのでしょうか？ サイトによって見る方も違うと思うし、別な意見や答えが見つかるかも知れないと思うのですが？？ 利用規約とかに違反はしてないと思いますが、道義的にいけないと言う事でしょうか？ ↑別に文句とかではないので、気を悪くしないで下さい。
補足
まさに、こんな感じでバッチリなのですが、横表示のもの、縦表示のもの、文書表示のものをそれぞれ別々に表示するにはどうしたら良いのでしょうか？ お手数をお掛けしてすいませんが、よろしくお願いします。