重複しないランダムリンクの表示位置

解決済

質問者：ayana_kizu
質問日時：2009/10/14 00:21
回答数：4件

複数の画像の中から数個を選び、それを重複しないように表示し、尚且つ各画像に合った文章を表示したいのです。
それで、色々と調べて、以下のようなものを見つけました。
私が求めているものに極めて近いのですが、２～３変更したいのです。
しかし、どこをどうしたら良いの全くわかりません。
どなたか助けてください。

質問は３つあります。
一つ目は、画像をリンクにしたいということです。
二つ目は、文章を画像の下に持って来たいのです。
（画像、文章、画像、文章・・・の順に縦に表示されるように）
三つ目は、文章もリンクにしたいということです。

三つ目はできればで構いませんが、一つ目と二つ目は必須でお願いします。

初心者なものですから、わかりやすく教えて頂けるとありがたいです。
よろしくお願いします。

記述は以下の通りです。
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test　２３区外</title>
<script type="text/javascript">

</script>
<div id="galleryArea"></div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.4

回答者： fujillin
回答日時：2009/10/14 20:20

こんにちは。

表示内容やスタイルをHTMLやCSSで自由に設定できるように、スクリプトの処理内容をを限定化してみました。
galleryArea内の子要素のdivの順序をランダムにし、指定数だけ表示する機能だけにしたものです。
表示する内容はHTMLで好きに記載できますし、スタイルもCSSなどで指定しておけばよろしいかと…
また、各divの内容は必ずしも同じ形式のものである必要はありません。
（例では、各divの上下の間隔を少し広げています）

イベントの組込み方法は、ご質問文のものをそのまま利用しています。
<html>
<head>
<style type="text/css">
#galleryArea div { margin-bottom:12px; }
</style>
<script type="text/javascript">
function setGallery() {
var n = 6; //　←表示する数を指定

var ga, i = -1, j = 0, e = [], tmp;
ga = document.getElementById('galleryArea'), elm = ga.childNodes;
while (elm[++i]) if (elm[i].nodeName=='DIV') e[j++]=elm[i];
if (n>e.length) n = e.length;
for (i=0; i<e.length; i++) {
j = Math.floor(Math.random() * e.length);
tmp = e[i], e[i] = e[j], e[j] = tmp;
}
for (i=0; i<e.length; i++) {
ga.appendChild(e[i]);
if (i>=n) e[i].style.display = 'none';
}
}

if(window.addEventListener) {
window.addEventListener('load', setGallery, false);
}
else if(window.attachEvent) {
window.attachEvent('onload', setGallery);
}
</script>
</head>

<body>
<div id="galleryArea">
<div><a href="#a1"><img src="sampl1.jpg" alt="画像a"></a>
<br><a href="#a2">1番目の文章表記</a></div>

<div><a href="#b1"><img src="sampl2.jpg" alt="画像b"></a>
<br><a href="#b2">2番目の文章表記</a></div>

<div><a href="#c1"><img src="sampl3.jpg" alt="画像c"></a>
<br><a href="#c2">3番目の文章表記</a></div>

<div><a href="#d1"><img src="sampl4.jpg" alt="画像d"></a>
<br><a href="#d2">4番目の文章表記</a></div>

<div><a href="#e1"><img src="sampl5.jpg" alt="画像e"></a>
<br><a href="#e2">5番目の文章表記</a></div>

<div><a href="#f1"><img src="sampl6.jpg" alt="画像f"></a>
<br><a href="#f2">6番目の文章表記</a></div>

<div><a href="#g1"><img src="sampl7.jpg" alt="画像g"></a>
<br><a href="#g2">7番目の文章表記</a></div>

<div><a href="#h1"><img src="sampl8.jpg" alt="画像h"></a>
<br><a href="#h2">8番目の文章表記</a></div>

<div><a href="#i1"><img src="sampl9.jpg" alt="画像i"></a>
<br><a href="#i2">9番目の文章表記</a></div>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

なるほど・・・
こういうやり方もあるのですね。

とっても参考になりました。
ありがとうございます。

通報する

お礼日時：2009/10/14 20:48

No.3ベストアンサー

回答者： babu_baboo
回答日時：2009/10/14 17:44

#1です

margin : 10px;
これを小さく

t.appendChild( tag( 'DIV', (A.href = o[3], A.target = '_blank', A.appendChild( d.createTextNode( o[2] ) ), A) ) );
でどうだろう？

- 0
- 件

通報する

この回答へのお礼

やりたかった通りにできました！！！
本当にありがとうございます。

これを機に私も色々勉強してみます。
お世話になりました。

通報する

お礼日時：2009/10/14 20:47

No.2

回答者： babu_baboo
回答日時：2009/10/14 13:38

http://www.google.co.jp/search?complete=1&hl=ja& …

http://www.google.co.jp/search?complete=1&hl=ja& …

すこしは・・・

- 0
- 件

通報する

この回答へのお礼

参考にさせて頂きました。
ありがとうございます。

通報する

お礼日時：2009/10/14 20:45

No.1

回答者： babu_baboo
回答日時：2009/10/14 01:35

ごめんなさい。

きづいてみたら、わかりにくくなってました。^^;
ぜんかくくうはくは、はんかくになおしてね。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test</title>
<style type="text/css">
#galleryArea div {
border : 2px outset;
width : 400px;
margin : 10px;
}
#galleryArea div a img {
display : block;
border : none;
}
</style>

<body>
<div id="galleryArea"></div>

<script type="text/javascript">
</script>