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


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

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

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

回答の条件
  • 1人3回まで
  • 登録:2008/02/13 22:34:18
  • 終了:2008/02/14 12:13:20

ベストアンサー

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812008/02/14 00:51:03

ポイント80pt

二例ほど。

<!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>
id:nilai-kanai

ありがとうございました。

一つ目のコードを試してみた所、意図した通りの動作でした。大変助かりました。

2008/02/14 12:04:54

その他の回答(2件)

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812008/02/14 00:51:03ここでベストアンサー

ポイント80pt

二例ほど。

<!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>
id:nilai-kanai

ありがとうございました。

一つ目のコードを試してみた所、意図した通りの動作でした。大変助かりました。

2008/02/14 12:04:54
id:Mars No.2

Mars回答回数203ベストアンサー獲得回数202008/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>
id:nilai-kanai

ありがとうございます。

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

2008/02/14 12:10:18
id:Mars No.3

Mars回答回数203ベストアンサー獲得回数202008/02/14 10:49:15

ポイント10pt

#2です。

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

randWrite関数の最終行)

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

正 randObjects.splice(rr,1);

id:nilai-kanai

ありがとうございます。

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

2008/02/14 12:11:06

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

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

トラックバック

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません