- ベストアンサー
画像のランダム表示、及び画像毎のリンク設定に関して
- 画像のランダム表示と画像毎のリンク設定について質問します。サムネール画像が100個あり、各画像に対して個別のリンクを設定したいです。
- 過去の質問を参考にし、画像のランダム表示を実現しました。ランダム表示するためのソースコードとサムネール画像の準備方法について詳しく説明しました。
- さらに、各サムネール画像にリンク先を設定したいです。例えば、image0000.jpgには./0000.htmlへのリンクを設定したいです。最終的には100個以上のサムネール画像とリンク先があるため、リンク先を別ファイルで管理する方法を教えていただけると助かります。
- nori_007
- お礼率75% (145/192)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
補足のご質問への返答です！ 壊れた画像３つというのは、正常にランダムで３つ画像が表示されていて、他に３つの表示されない画像が存在すると言う状態でしょうか。 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からどこが問題なのか判断できるんじゃないかな？と思います。
その他の回答 (1)
- みずの（@mizuno3）
- ベストアンサー率73% (192/263)
外部ファイル 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]); に変えると良いかも知れません。
お礼
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>'; 多分「少し変えると以下。」は、スクリプトの記述が膨大になるのを防ぐ為の記述と理解しました。 後は補足に質問します。
補足
続きの質問をさせて頂きます。 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個表示されています。 何が問題になっているのか、アドバスを頂ければとても嬉しく思います。 追加の質問で申し訳ありません。
お礼
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"> <!-- div#photo { width: 400px; } --> </style> <div id="photo"> を用意出来た事でレイアウトが自由になりました。 何度もアドバイスをして頂き本当にありがとうございました。 何とかアドバイスを頂いた、JavaScript を理解出来るよう頑張りたいと思います。