人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

●質問者: nilai-kanai
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript Web コード ランダム リンク
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● GoldenDawn
●80ポイント ベストアンサー

二例ほど。

<!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>
◎質問者からの返答

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

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


2 ● Mars
●40ポイント

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

<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>
◎質問者からの返答

ありがとうございます。

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


3 ● Mars
●10ポイント

#2です。

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

randWrite関数の最終行)

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

正 randObjects.splice(rr,1);

◎質問者からの返答

ありがとうございます。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ