画像のランダム表示、及び画像毎のリンク設定に関して

解決済

質問者：nori_007
質問日時：2008/06/03 21:02
回答数：2件

こんにちは。

サムネールの画像が、最終的には100個位出来ます。個々のサムネール画像毎にリンクを設定したいと思います。

サムネール画像をダブらずランダムに表示する方法は、過去の質問を拝見して実現出来ました。

下記の質問が参考なりました。
http://oshiete1.goo.ne.jp/qa716071.html

過去の質問のとおり、下記のソースをまねて画像のランダム表示は可能になりました。基本的に上記質問のソースとほぼ同じ内容になります。

<html>
<head>
<title>ランダム表示</title>
<script type="text/javascript">

</script>
</head>
<body>

<img src="*" name="imgs0"><br>
<img src="*" name="imgs1"><br>
<img src="*" name="imgs2">

</body>
</html>

画像は、images と言うフォルダを作り、フォルダ内に、image0000.jpg から image0019.jpg の画像を20個用意する事で、ランダムにサムネール画像を表示出来るようになりました。

希望として、サムネール画像毎にリンク先を設定したいと思っています。
イメージとして、ランダムに表示するバナー広告みたくしたいと思います。

サムネール画像とリンク先とは具体的に。
image0000.jpg が表示されたら、同じサイト内に ./0000.html へリンクを張れるようにしたいと思います。

また、最終的にサムネール画像は100個近くになり、リンク先もサムネール画像と同じ数になりますので、リンク先は別ファイルで管理出来るようになれば嬉しく思います。

アドバイスか、ヒントを頂ければと思います。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： mizuno3
回答日時：2008/06/05 02:09

補足のご質問への返答です！

壊れた画像３つというのは、正常にランダムで３つ画像が表示されていて、他に３つの表示されない画像が存在すると言う状態でしょうか。

ImgDisp()の最後にある document.body.appendChildは直接Body内に画像を書き出すので、元々ある<img>タグは不要になります。

例えば書き出した居場所があるなら

<span id="kokonikakitai"></span>

こんなタグを用意しておいて、

document.body.appendChild(elementA);

この部分を

document.getElementById('kokonikakitai').appendChild(elementA);

こんな風に書き換えると任意の場所に書き出せたりします。

元々ある画像は存在させておきたい！なんて場合は、返答に書いた

document.images["imgs" + i].parentNode.replaceChild(elementA, document.images["imgs" + i]);

の処理にすれば元々の画像を書き換えてくれると思います。

そうではなく、ランダムの画像が表示されない場合はどっかおかしいかも知れません。
画像を右クリックしてプロパティを見て、画像のURLからどこが問題なのか判断できるんじゃないかな？と思います。

- 0
- 件

通報する

この回答へのお礼

mizuno3 様

再度のアドバイスをありがとうございました。
下記の通りにする事で、希望通りになりました。

まず
壊れた画像のアイコンは、他の写真がちゃんと表示し、リンクも問題なく設定されていた状態にです。
html ファイルは、

<img src="*" name="imgs0"><br>
<img src="*" name="imgs1"><br>
<img src="*" name="imgs2">

の記述をそのままにしていましたが、上記の記述が壊れた画像のアイコンの正体でした、削除した事で壊れた画像のアイコンは表示されなくなりました。

ただ、ご指摘の通りページレイアウトの関係、任意の位置に表示させたい為。

document.body.appendChild(elementA);

　↓↓↓↓↓↓↓↓

document.getElementById('kokonikakitai').appendChild(elementA);

と変更し、

<div id="photo">
<span id="kokonikakitai"></span>
</div>

とした事で、任意の位置に表示させることが出来ました。
ちなみに、<div id="photo">でスタイルシートにて、表示領域をコントールすることが出来ました。

スタイルシートでは、以下のように設定してみました。
<style type="text/css">

</style>

<div id="photo"> を用意出来た事でレイアウトが自由になりました。

何度もアドバイスをして頂き本当にありがとうございました。
何とかアドバイスを頂いた、JavaScript を理解出来るよう頑張りたいと思います。

通報する

お礼日時：2008/06/05 20:24

No.1

回答者： mizuno3
回答日時：2008/06/04 01:26

外部ファイル

var randURL = {
'0000':'http://domain/path/filename',
'0001':'http://domain/path/filename',
'0002':'http://domain/path/filename'
};

こんな感じ。
ファイル名を例えば randomurl.jsにする。

<script type="text/javascript" src="http://domain/path/randomurl.js"></script>
で読み込みます。

書き出しの処理は今のままでやるなら以下でしょうか。

function ImgDisp(){
document.images["imgs0"].src=RndImg[0].src;
document.images["imgs1"].src=RndImg[1].src;
document.images["imgs2"].src=RndImg[2].src;

document.images["imgs0"].outerHTML = '<a href="' + randURL[NoMem[0]] + '">' + document.images["imgs0"].outerHTML + '</a>';
document.images["imgs1"].outerHTML = '<a href="' + randURL[NoMem[1]] + '">' + document.images["imgs1"].outerHTML + '</a>';
document.images["imgs2"].outerHTML = '<a href="' + randURL[NoMem[2]] + '">' + document.images["imgs2"].outerHTML + '</a>';
}

少し変えると以下。

function ImgDisp(){
for (var i = 0; i < 3; i++) {
var elementA = document.createElement("a");
elementA.href = randURL[NoMem[i]];
elementA.appendChild(RndImg[i]);
document.body.appendChild(elementA);
}
}

元々あるImgと差し替えたい場合は

document.body.appendChild(elementA);の部分を

document.images["imgs" + i].parentNode.replaceChild(elementA, document.images["imgs" + i]);

に変えると良いかも知れません。

この回答への補足

続きの質問をさせて頂きます。

function ImgDisp(){
の項目を以下の通りに書き換えました。

function ImgDisp(){
for (var i = 0; i < 3; i++) {
var elementA = document.createElement("a");
elementA.href = randURL[NoMem[i]];
elementA.appendChild(RndImg[i]);
document.body.appendChild(elementA);
}
}

書き換えた結果、サムネール画像がランダムに表示し、画像毎のリンクも問題なく、スクリプトの記述も短くなり、是非とも利用させて頂きたいと思います。
ただ、書き換えるとブラウザ上に画像が表示出来ない時に表示される、壊れた画像のアイコンが3個表示されています。

何が問題になっているのか、アドバスを頂ければとても嬉しく思います。
追加の質問で申し訳ありません。

補足日時：2008/06/04 18:58

通報する

- 0
- 件

通報する

この回答へのお礼

mizuno3 様

アドバイスをありがとうございました。
アドバイスの通りに修正するこで、希望通りのことが出来てとても感謝いたします。

ただ、下記の記述の部分ですが、function ImgDisp() の記述が膨大になってしまうと思います。

function ImgDisp(){
document.images["imgs0"].src=RndImg[0].src;
document.images["imgs1"].src=RndImg[1].src;
document.images["imgs2"].src=RndImg[2].src;

document.images["imgs0"].outerHTML = '<a href="' + randURL[NoMem[0]] + '">' + document.images["imgs0"].outerHTML + '</a>';
document.images["imgs1"].outerHTML = '<a href="' + randURL[NoMem[1]] + '">' + document.images["imgs1"].outerHTML + '</a>';
document.images["imgs2"].outerHTML = '<a href="' + randURL[NoMem[2]] + '">' + document.images["imgs2"].outerHTML + '</a>';

多分「少し変えると以下。」は、スクリプトの記述が膨大になるのを防ぐ為の記述と理解しました。

後は補足に質問します。