![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
こんにちは。
サムネールの画像が、最終的には100個位出来ます。個々のサムネール画像毎にリンクを設定したいと思います。
サムネール画像をダブらずランダムに表示する方法は、過去の質問を拝見して実現出来ました。
下記の質問が参考なりました。
http://oshiete1.goo.ne.jp/qa716071.html
過去の質問のとおり、下記のソースをまねて画像のランダム表示は可能になりました。基本的に上記質問のソースとほぼ同じ内容になります。
<html>
<head>
<title>ランダム表示</title>
<script type="text/javascript">
<!--
NoMem = new Array();
function RndmNo(n){
x=Math.floor(Math.random()*29);
if (NoMem.length){
for (j=0; j<NoMem.length; j++){
if (NoMem[j]==x){ RndmNo(n);}
}
}
x=new String(x);
if (x.length==1){ x="000"+x;}
else if (x.length==2){ x="00"+x;}
else if (x.length==3){ x="0"+x;}
NoMem[n]=x;
}
for (k=0; k<3; k++){
RndmNo(k);
}
RndImg= new Array();
for (i=0; i<3; i++){
RndImg[i]= new Image();
RndImg[i].src="images/image"+NoMem[i]+".jpg";
}
function ImgDisp(){
document.images["imgs0"].src=RndImg[0].src;
document.images["imgs1"].src=RndImg[1].src;
document.images["imgs2"].src=RndImg[2].src;
}
window.onload=ImgDisp;
//-->
</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個近くになり、リンク先もサムネール画像と同じ数になりますので、リンク先は別ファイルで管理出来るようになれば嬉しく思います。
アドバイスか、ヒントを頂ければと思います。
No.2ベストアンサー
- 回答日時:
補足のご質問への返答です!
壊れた画像3つというのは、正常にランダムで3つ画像が表示されていて、他に3つの表示されない画像が存在すると言う状態でしょうか。
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からどこが問題なのか判断できるんじゃないかな?と思います。
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 を理解出来るよう頑張りたいと思います。
No.1
- 回答日時:
外部ファイル
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個表示されています。
何が問題になっているのか、アドバスを頂ければとても嬉しく思います。
追加の質問で申し訳ありません。
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>';
多分「少し変えると以下。」は、スクリプトの記述が膨大になるのを防ぐ為の記述と理解しました。
後は補足に質問します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP 画像が表示出来ません。 1 2023/02/02 16:30
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
iframe内のリンク文字のマウス...
-
JavaScript で flexslider の画...
-
画像の重なりの順序を代える方...
-
画像のランダム表示、及び画像...
-
画像を切り替えランダム表示
-
textareaに画像を表示したい
-
前回の質問の続き
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
フッター上部に謎の隙間
-
iframe内のリンクが飛ばないの...
-
MFCで画像を表示させているので...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
appendChildでのデフォルト値
-
【javascript】ロールオーバー...
-
[jQuery]bxSlider 一番最後と...
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Javascriptで指定した日付と時...
-
javascriptで毎月替わる画像
-
画像をフォルダに入れれば表示...
-
画像の重なりの順序を代える方...
-
スワップイメージが上手く動作...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
Gifアニメ、最後のコマに行った...
-
bxsliderにて読み込み後に内容...
-
Javascript で共通の処理をどこ...
-
1枚の画像をクリックして複数の...
-
各フォルダから1枚ずつ画像をラ...
-
画像を切り替えランダム表示
-
画像削除機能を付けたい
-
マウス追従スクリプトについて
-
画像ランダム表示、しかしダブ...
-
<table>、もしくは<iframe>内で...
-
1枚の画像をクリックすると複数...
-
画像とテキストのセットをラン...
おすすめ情報