• ベストアンサー

div要素内の画像およびテキストリンクのランダム複数表示

いろいろ探しましたが、うまくいっておりません。 サイトのトップページに商品リンクを張る予定で、 数十個ある商品リンクをランダムに5個表示(重複不可)させようと考えています。 それぞれの商品リンクは、 <div class="item"> 中はサムネイル画像、<div>商品名</div>、<div>商品説明</div>、<div>価格</div> </div> といった感じです。 5個の<div class="item">～</div>をランダムに表示させるjavascriptは、 どのように記述したらよいのでしょうか？ よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
noname#84373
noname#84373
回答No.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>サンプル</title> <ul id="p"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <script type="text/javascript"> //@cc_on window./*@if(@_jscript)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function () { var a=document.getElementById('p'),c=a.childNodes,i=0,o,j=0,n=5; while(o=c[i++])if(1!=o.nodeType)a.removeChild(o); i=a.childNodes.length; while(i)a.appendChild((c[r=Math.random()*i--|0].style.display=j++<n?'block':'none',c[r])); }, false); </script>

hirore
質問者

お礼

早速ありがとうございます！ この方法は使えそうですね！！ 重ねて質問で申し訳ないのですが、SSIやPHPを使わずにリストの部分をシンプルに外部化できないでしょうか？ ひとつの商品リンクが結構なボリュームになるので、index.htmlに直接記述するのは避けたいのですが。 よろしくお願いいたします。

hirore
質問者

補足

javascriptのdocument.writeでなんとかいけそうです。 記述がめんどくさいですが、excelとかでやってみます！ ありがとうございました！！

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • div要素をランダムに表示させたい

    お世話になります。Javascriptについて質問させていただきます。 拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。 ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。 ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }

  • <li>の画像およびテキストリンクのランダム複数表示

    javascriptでランダム表示する方法を教えて下さい。 サイト内に商品の一覧を作成しようと考えており、それぞれの商品画像、テキストリンクをランダムで動かしたいと思っております。 商品数は10点くらいになる予定です。 <div id="sample"> <ul> 　<li> 　　<dl> 　　<dt>商品1</dt> 　　<dd>商品画像</dd> 　　<dd>商品コメント</dd> 　　</dl> 　</li> 　<li> 　　<dl> 　　<dt>商品2</dt> 　　<dd>商品画像</dd> 　　<dd>商品コメント</dd> 　　</dl> 　</li> </ul> </div> ソースはこんな感じで、10点程の掲載予定です。 <li>～～</li>リスト10点をランダム表示する javascriptを教えて下さい。 よろしくお願いいたします。

  • ランダム表示画像にリンクマップを貼れますか？

    ページの上部に、ページが更新するたびに違う画像が 表示されるようにJavaScriptで記述をしているのですが、 その画像の数箇所に、別々のURLを貼りたいのです。 ランダム表示ではない通常の画像の場合、 それぞれの形に合わせてエリアを指定し、 リンクマップをすればいいと思うのですが、 ランダム表示をしている画像に対しては どうすれば良いのでしょうか？ また、リンクを貼る部分をオンマウスオーバーするようにも したいのです。 このような事は可能なのでしょうか？

  • 画像からランダムリンク

    Javascriptでランダムリンクをする場合、 <form> <input type=button onClick="jump()" value="ランダム"> </form> <script> url = new Array(); url[0] = "00.html"; url[1] = "01.html"; url[2] = "02.html"; function jump() { p = Math.round(Math.random() * (url.length - 1)); parent.top.document.location = url[p]; } </script> という記述を使うのは知っているんですが、 「ランダムリンク」というボタンではなく、 画像をクリックしてランダムリンクさせることは可能でしょうか？ Javascriptでは無理な場合、 画像からランダムリンクを張る方法はありますか？ CGI等でも構いませんので、お勧めがあれば教えてください。

  • ランダムに複数のリンク、重複なし。

    http://www.eweb-design.com/affiliate/0303_jr.html こちらのサイトのソースを参考にランダムに複数のリンクを表示したいと考えています。 このソースだとランダムに複数のリンクを表示できたのですが、重複しないように表示ができません。 そこでいくつか調べてみたところ、重複しないようにランダムに複数表示するスクリプトを発見しましたが、あまりシンプルに作成されていないため使用するのをやめました。 やはり、重複しないという条件をつけるとスクリプトは長くなってしまうのでしょうか？ このスクリプトは諦めて他のスクリプトを試すべきなのでしょうか？ JavaScriptに詳しい方、よろしくお願いします。

  • リンク画像のランダム表示について

    はじめまして。 諸先輩方、ご教授いただければと思います。 現在、JavaScriptでのリンク画像のランダム表示を、コーティングしてます。 配列に値をセットする方法は、存じてるのですが、対象のリンク画像が数十件あるため、全て記述するのはスマートではないと思い、とあるフォルダに対象のリンク画像を格納(1～50.jpg)し、取得したランダム値をもとに画像を表示させる所までは実装できました。 その際に画像へリンクを貼る段階で詰まってしまいました。 何か良い方法はないでしょうか？ 私の考えでは配列にリンク情報を格納し、取得したランダム値をもとに取得するのかなと思ってますが、取得後のリンク設定方法がわかりません。 また、リンク画像を表示時、ロールオーバー処理も行いたく、外部ｊｓファイルにロールオーバー処理を記述しました。 IEでは、問題なく表示されてますが、他のブラウザではロールオーバーが出来ません。 これは、リンク画像のランダム表示時にロールオーバー処理を追記する必要があるのでしょうか？

  • ランダムに表示する画像にリンク

    javascriptで、リロードするたびにランダムに画像を 表示するようにしている（画像は合計5枚）のですが、 ランダムに表示するように用意している画像の一枚一枚に 各画像バラバラのリンク先を設定することというのは可能なのでしょうか？ また、可能であるのならその方法をお教え願えませんでしょうか。 よろしくお願い申し上げます。

  • div内の classのリンクのつけ方

    <body class="thrColFixHdr"> <div id="header"> <div id="headerIn"> <div class="logo">店名</div> <h1>ようこそ</h1> </div> <!-- end #header --></div> ホームページの一番上の部分です。 http://www.goo.ne.jp/ 上記サイトのように左上にロゴが入っており、 お店ページのロゴをクリックしたら、上記ページと同じようにトップページに戻るようにしたいのですが、 class="logo"にリンクをつけても反応してくれません。 それ以外にググって色々調べましたが、どうしても方法が分りません。 初歩的な質問かもしれず、恐縮ですがご教授いただければ幸いです。

  • 画像リンクをランダムに４つ表示する

    このようなタグを使って、画像リンクのランダム表示を作成しました。 ((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つ表示』にしたいのです。 …どうすればいいのでしょうか？ どなたか回答をお願いします。

  • 複数の画像をランダムに表示させるソースを教えて？

    画像は50枚前後、画像といってもリンクバーで画像毎にそれぞれの違ったリンク先ＵＲＬも指定したく、（target="_blank"）なおかつ表示箇所はテーブル内のセル8箇所で、重複しないようにランダムに表示させたいです。と、ＸＨＴＭＬで書かれた既存ページで使うのでスクリプトは外部ファイル（ｊｓ）にして、ページコード上では<body onload="____"><img id="～>等で読み込ませたいです。※ＸＨＴＭＬではname属性は使えません。また私はjavascriptについて全くの素人ですので、画像数、ＵＲＬ、パス等を書き換えるだけで直ぐに使えるソースが欲しいです。どなたか教えて頂けると幸いに存じます。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する