【javascript】webページに画像をランダムに（重複しないように、あとそれぞれにリンクもつけて）表示させたいです。

Question

nilai-kanai

17

17もっと見る

130pt

インターネットウェブ制作

【javascript】webページに画像をランダムに（重複しないように、あとそれぞれにリンクもつけて）表示させたいです。

http://q.hatena.ne.jp/1128584079

上記のページは非常に解り易く解説されているんですが、これですと「画像とリンクを繰り返し吐き出す」形になってしまい、画像それぞれをページ内の任意の場所に指定できません。

それぞれ違った画像をランダムに、なおかつページ内に分散して配置したいのですが、どのように改造したら良いでしょうか？詳しい解説をお願いします。上記リンク先のように、サンプルコードを示して頂けると大変助かります。

回答の条件

1人3回まで

登録：2008/02/13 22:34:18
終了：2008/02/14 12:13:20

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.2

Mars203202008/02/14 04:59:47

40pt

ランダムに、「何でも」吐き出すサンプルです。

<html>
<head>
<script type="text/javascript">
var randObjects=[
	'<a href="http://example.com/1"><img src="imgA.gif" alt="A" width="80" height="31"></a>',
	'<a href="http://example.com/2"><img src="imgB.gif" alt="B" width="80" height="31"></a>',
	'<a href="http://example.com/3"><img src="imgC.gif" alt="C" width="80" height="31"></a>',
	'<a href="http://example.com/4"><img src="imgD.gif" alt="D" width="80" height="31"></a>',
	'<a href="http://example.com/5"><img src="imgE.gif" alt="E" width="80" height="31"></a>'
];
function randWrite() {
	var rr = parseInt(Math.random() * randObjects.length);
	document.write(randObjects.slice(rr,rr+1)[0]);
	randObjects.splice(rr,rr+1);
}
</script>
</head>
<body>

<p><script type="text/javascript">randWrite()</script></p>
<p><script type="text/javascript">randWrite()</script></p>
<p><script type="text/javascript">randWrite()</script></p>

</body>
</html>

ありがとうございます。

こちらもシンプルで使えそうです。いろんな方法がありますね。

2008/02/14 12:10:18

No.3

Mars203202008/02/14 10:49:15

10pt

#2です。

一行間違いがありましので訂正します。

randWrite関数の最終行）

誤 randObjects.splice(rr,rr+1);

↓

正 randObjects.splice(rr,1);

ありがとうございます。

お二方の回答で、とりあえず解決できましたので質問を終了します。

2008/02/14 12:11:06

コメントはまだありません

webページに複数の画像とエントリーのリンクを重複しないでランダムに複数表示するスクリプト favorites pic 2010-01-02 22:29:38

.clip{ float: left; margin: 0pt 30px 8px; width: 80px; height: 80px; } webページに複数の画像とエントリーのリンクを重複しないでランダ...
人力検索はてな java scriptで複数の画像とテキストをがラ.. 2011-10-19 09:36:03

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

GoldenDawn · Accepted Answer · 2008-02-14T00:51:03+09:00

二例ほど。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript">
      var images = {
        // 画像とジャンプ先の URL のペア
        url : [
          ['hatena.gif', 'http://www.hatena.ne.jp'],
          ['yahoo.gif', 'http://www.yahoo.co.jp'],
          ['google.png', 'http://google.com']
          ],

        // 順番のシャッフル
        shuffle : function() {
          for (i = this.url.length; i > 0; --i) {
            tmp = this.url[p = Math.floor(Math.random()*i)] ;
            this.url[p] = this.url[i-1] ;
            this.url[i-1] = tmp ;
          }
        },

        p : 0, // 表示画像のポインタ

        // 画像表示
        put : function() {
          document.write('<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p++][0]+'" /></a>') ;
          if (this.p >= this.url.length) this.p = 0 ;
        }
      } ;

      images.shuffle() ;

    </script>
  </head>

  <body>
    <div>
      あいうえおあいうえお
      <!-- 画像を表示させたいところに ↓ これを挿入 -->
      <script type="text/javascript">images.put() ;</script>
    </div>

    <div>
      かきくけこかきくけこ
      <script type="text/javascript">images.put() ;</script>
    </div>

    <p>
      さしすせそさしすせそ
      <script type="text/javascript">images.put() ;</script>
    </p>
  </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript">
      var images = {
        // 画像とジャンプ先の URL のペア
        url : [
          ['hatena.gif', 'http://www.hatena.ne.jp'],
          ['yahoo.gif', 'http://www.yahoo.co.jp'],
          ['google.png', 'http://google.com']
          ],

        // 順番のシャッフル
        shuffle : function() {
          for (i = this.url.length; i > 0; --i) {
            tmp = this.url[p = Math.floor(Math.random()*i)] ;
            this.url[p] = this.url[i-1] ;
            this.url[i-1] = tmp ;
          }
        },

        p : 0, // 表示画像のポインタ

        // 画像表示
        put : function() {
          if (this.p >= this.url.length) this.p = 0 ;
          return '<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p++][0]+'" /></a>' ;
        }
      } ;

      onload = function() {
        images.shuffle() ;
        divs = document.getElementsByTagName('div') ;
        for (i = 0; i < divs.length; ++i) {
          if (divs[i].className != 'block') continue ; // class が「block」ではない div はスルー
          divs[i].innerHTML += images.put() ;
        }
      }

    </script>
  </head>

  <body>
    <div class="block">
      <!-- class が 「block」の div 要素に付け加えられる -->
      あいうえおあいうえお
    </div>

    <div class="block">
      かきくけこかきくけこ
    </div>

    <div class="block">
      さしすせそさしすせそ
    </div>
  </body>
</html>

GoldenDawn · Accepted Answer · 2008-02-14T00:51:03+09:00

二例ほど。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript">
      var images = {
        // 画像とジャンプ先の URL のペア
        url : [
          ['hatena.gif', 'http://www.hatena.ne.jp'],
          ['yahoo.gif', 'http://www.yahoo.co.jp'],
          ['google.png', 'http://google.com']
          ],

        // 順番のシャッフル
        shuffle : function() {
          for (i = this.url.length; i > 0; --i) {
            tmp = this.url[p = Math.floor(Math.random()*i)] ;
            this.url[p] = this.url[i-1] ;
            this.url[i-1] = tmp ;
          }
        },

        p : 0, // 表示画像のポインタ

        // 画像表示
        put : function() {
          document.write('<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p++][0]+'" /></a>') ;
          if (this.p >= this.url.length) this.p = 0 ;
        }
      } ;

      images.shuffle() ;

    </script>
  </head>

  <body>
    <div>
      あいうえおあいうえお
      <!-- 画像を表示させたいところに ↓ これを挿入 -->
      <script type="text/javascript">images.put() ;</script>
    </div>

    <div>
      かきくけこかきくけこ
      <script type="text/javascript">images.put() ;</script>
    </div>

    <p>
      さしすせそさしすせそ
      <script type="text/javascript">images.put() ;</script>
    </p>
  </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript">
      var images = {
        // 画像とジャンプ先の URL のペア
        url : [
          ['hatena.gif', 'http://www.hatena.ne.jp'],
          ['yahoo.gif', 'http://www.yahoo.co.jp'],
          ['google.png', 'http://google.com']
          ],

        // 順番のシャッフル
        shuffle : function() {
          for (i = this.url.length; i > 0; --i) {
            tmp = this.url[p = Math.floor(Math.random()*i)] ;
            this.url[p] = this.url[i-1] ;
            this.url[i-1] = tmp ;
          }
        },

        p : 0, // 表示画像のポインタ

        // 画像表示
        put : function() {
          if (this.p >= this.url.length) this.p = 0 ;
          return '<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p++][0]+'" /></a>' ;
        }
      } ;

      onload = function() {
        images.shuffle() ;
        divs = document.getElementsByTagName('div') ;
        for (i = 0; i < divs.length; ++i) {
          if (divs[i].className != 'block') continue ; // class が「block」ではない div はスルー
          divs[i].innerHTML += images.put() ;
        }
      }

    </script>
  </head>

  <body>
    <div class="block">
      <!-- class が 「block」の div 要素に付け加えられる -->
      あいうえおあいうえお
    </div>

    <div class="block">
      かきくけこかきくけこ
    </div>

    <div class="block">
      さしすせそさしすせそ
    </div>
  </body>
</html>

【javascript】webページに画像をランダムに（重複しないように、あとそれぞれにリンクもつけて）表示させたいです。

ベストアンサー

GoldenDawn426812008/02/14 00:51:03

その他の回答（2件）

GoldenDawn426812008/02/14 00:51:03ここでベストアンサー

Mars203202008/02/14 04:59:47

Mars203202008/02/14 10:49:15

コメント（0件)

この質問への反応（ブックマークコメント）

トラックバック