- 締切済み
javaScriptでリンク画像のランダム更新表示
画像をランダム表示する方法はわかったのですが、 各画像にリンク設定したいのと、 各画像の大きさをCSSのwidthやhighのように調整する方法をご教授ください。 <html> <body> <script type="text/javascript"> <!-- var imgURL = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg"]; var n = Math.floor(Math.random() * imgURL.length); document.write('<img src="'+imgURL[n]+'">'); // --></script> </body> </html>
- aaiok
- お礼率34% (35/101)
- JavaScript
- 回答数6
- ありがとう数1
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
何度か、読み直すように指摘したつもりですが、ろくに読んではいらっしゃらないようですね… ＞#2#3で回答頂いた方法を試したところ、文章を表示できない。 試しているとは思えません。 文章でも説明した（つもりですが）ように、#3は確かにできませんが#2はできるはず。 ＞１．現在、数百ページに及ぶＷＥＢサイトに更新の度に切り替わる画像バナーを掲載したい。 同じものを各ページに埋め込む方法として他にincludeと言われる方法があります。 SSIが代表的。最近ならPHPを利用するところかも。 （javascriptのようにユーザの設定に影響されない） まぁ、どうしても使いたいのなら、フレームを使うのは本人の自由ですが… （DTDの確認もお忘れなく）
- fujillin
- ベストアンサー率61% (1594/2576)
#1～4です。 なんか、まったく誤解されているようですが、1～4の回答全てフレームを考えてはいません。 なぜなら、フレーム自体が非推奨とされているからです。（お使いになるのは自由ですが） それなので、ご質問の『フレームうんぬん』に関しては意味がよくわかりません。 ＞それぞれに７つの画像とリンクを付けるとなると、35個分のHTML ＞ソースを書かなければなりません。当然容量も増えます。 javascriptにしたところで、同じような内容のデータを持たなければならないので、全体の容量という観点からはほとんど差が無いと思います。 また、最近のネットワークの整備状況を考えれば、高々数十行の文字データの容量が大きな影響を与えるとは考え難いのですが…？ ＞#2と#3は、フレーム使用をすることのみでwebページ上で文章と一緒に実用できそうですね 再度書きますが、フレームの使用は考慮していません。 フレームをまたいでスクリプトを使用する場合等は、若干の修正が必要です。 ＞#3の方法を用いてフレーム処理をする方法しかないのでしょうか？ ＞すると、フレームを結構使うことになりそうですが・・・。 質問の意味がわかりません。 そもそも、フレームを使うか使わないかは文章をどのように構成するかによって決まるはずです。 HTMLソースとしてどの様にマークアップしておくのが良いかも、全体の文章構成・内容から決まってくるはずと思います。 その構成に基づいて、スクリプトを用いる場合はどのように処理をするかを決めるべきです。 （質問者様がどのような内容を、どのような構成でどのように表示したいのか、私は知りません） ただ、ご質問の内容はみな、フレームなしでも実現できることのように思えますが…？ ＞#3の画像のリンクですが、別窓で開きたい場合 #3そのままでは無理です。(理由は、#4参照）修正すれば当然可能になります。 #1、#2、#3、それぞれのスクリプトの考え方の違いは#4に記しましたので、よく御確認ください。 ＞それとも、外部のスクリプト内で定義されているdata配列で、 「同じことをdataで重複して定義することは容量の無駄になる」ことは#4に説明してありますが、容量を気になさるのであれば、そのような無駄こそを省くべきではないですか。
補足
フレーム非推奨は知っておりますが、ＷＥＢページを作成するためには、文章も一緒に記載したいです。しかし、#2#3で回答頂いた方法を試したところ、文章を表示できない。これでは、ＷＥＢページの意味を持たず、画像のみのＷＥＢページになってしまいます。従って、#2#3の方法で文章と一緒に画像を表示するには、フレームしか手がないということです。 また、#1の方法では、画像のHTMLソースをＷＥＢページに記述する為、複数のページに同じ更新のたびに変わる画像を掲載する場合、複数のＷＥＢページに同じ記述しなければなりません。ここまではいいでしょう。しかし、ページ数が数百ページに及ぶ場合、先に設定した画像を別の画像に変更する場合に、数百ページ分変更しなければなりません。これでは、時間がいくらあっても足りません。 少しわかりずらい部分もあったので簡潔にどのような構成にしたいか下記に記述しときたいと思います。 １．現在、数百ページに及ぶＷＥＢサイトに更新の度に切り替わる画像バナーを掲載したい。 ２．更新のたびに切り替わる画像のリンク、ＵＲＬ、名前、幅、高さ、ボーダー、別窓で開く等を外部JavaScriptでしたい 3.更新のたびに切り替わる画像と一緒に文章や他の画像も掲載したい。 ４．ＨＴＭＬソースはできるだけ少なくして、外部JavaScriptを反映させる形にしたい。 ５．数百ページに全て掲載する為、たとえば、Yahoo.Japanのようにトップページの右上の広告バナーのように、画像の変更をスクリプト内で完結できるようにしたい（理由は、数百ページ全てに画像ソースを記述した場合、画像を変更するたびに数百ページを変更しなくてはならない為） 以上ですが、宜しくお願い致します。
- fujillin
- ベストアンサー率61% (1594/2576)
#3です。 ＞１.下記のように、HTMLページ（sample）の画像タグの下に ＞文字やJavaScriptの影響を受けない画像を記載したところ、 ＞両方とも表示されない問題が発生しました。 回答の#2、#3は、#1の補足にあった『ソースはできるだけ少なくして』というのを目標にしたので、質問でご提示のスクリプトと同じようにURIやサイズをスクリプト側で定義する方式をとっています。（#1の回答とは方法が異なります） それなので、スクリプト内で定義されているdata配列に、『リンク先のURI、画像のアドレス、画像のALT、画像のwidth、画像のheight』の順で設定しておかないと思うようには動作しません。 また、#2と#3は同じような方法（少し違いますが）をとってはいるものの、#3では、#1の補足のHTMLに決め打ちにしてしまうことで（「できるだけ少なく」だったので、例示のままのリンクと画像のみなのだと思いました）、さらに短いHTMLとなるようにしてみたものです。 #3では例示の構成以外のソースは想定していません。どのようなソースを作成したとしてもキャンセルしてしまうので、スクリプトが動作する環境では表示されるのは画像とリンクのみになります。 他の要素も記述したいのであれば、#2のid付きのものをご利用ください。（こちらはid要素内のみが影響を受けます） （実際には、#2ではHTMLに記述された要素の属性を変更していますが、#3ではHTMLに記述された内容を一旦消去して、新たに画像とリンク要素を生成しています。） ＞２.画像のリンクに青い枠ができてしまうので、消したい場合、 ＞JavaScriptの表記は下記のもので正しいでしょうか 正しいです。 もっと細かく言うならば、 borderWidth = "0px" か borderStyle = "none"; でしょうか。 でも、必ず消すのでしょうから、わざわざdataに同じ値を重複して設定しておく必要はないと思われます。 選ばれた画像がなんであれ、枠線には一律に"0px"などを設定してあげればよいのですから。 #2を利用する場合は、枠線をスクリプトで設定しなくてもあらかじめCSSで設定しておくことでもそのまま指定に従います。（変更されるのは、width、heightのみです）
補足
回答有難うございました。 少し整理して色々考えていて、返答が遅れて申し訳御座いませんでした。 #2と#3は、フレーム使用をすることのみでwebページ上で文章と一緒に実用できそうですね。 #1は、画像をたくさん使いたい場合、HTMLソース<ul><li>を用いてたくさん書かなければならず、ページの容量が増えて重くなるのが難点ですね。たとえば、更新するごとに、画像が変化する画像を5つほど表示したとして、5つそれぞれに７つの画像とリンクを付けるとなると、35個分のHTMLソースを書かなければなりません。当然容量も増えます。 なるべく、#3のように外部で、『リンク先のURI、画像のアドレス、画像のALT、画像のwidth、画像のheight』等を指定し、かつ、文章や他の画像と一緒に用いるためには、#3の方法を用いてフレーム処理をする方法しかないのでしょうか？すると、フレームを結構使うことになりそうですが・・・。 あと、#3の画像のリンクですが、別窓で開きたい場合、 <!DOCTYPE html> <title>sample</title> <a href="A.html"> <img src="A.jpg" alt="AAA" target="_blank"> </a> と普通にtarget="_blank"タグを入れればよいのでしょうか？ それとも、外部のスクリプト内で定義されているdata配列で、 指定可能でしょうか？ 以上ですが宜しくお願致します。
- fujillin
- ベストアンサー率61% (1594/2576)
#1、#2です。 内容も決めうちでよいので、idも不要でしたね。 <!DOCTYPE html> <title>sample</title> <a href="A.html"> <img src="A.jpg" alt="AAA"> </a> ----外部スクリプト--- /*@cc_on@*/ window./*@if(1)attachEvent('on'+@else@*/addEventListener( /*@end@*/'load', function(){ var data = [ ["A.html", "A.jpg", "AAA", 400, 200], ["B.html", "B.jpg", "BBB", 100, 100], ["C.html", "C.jpg", "CCC", 300, 300], ["D.html", "D.jpg", "DDD", 200, 200] ]; var d = data[Math.floor(Math.random() * data.length)], a = document.createElement("a"), img = document.createElement("img"), t, b = document.body; a.appendChild(img); a.href = d[0]; img.src = d[1]; img.alt = d[2]; img.style.width = d[3]+"px"; img.style.height = d[4]+"px"; while(t=b.firstChild) b.removeChild(t); b.appendChild(a); }, false);
補足
回答有難うございます。 早速、上記を使ってみましたが、いくつか問題点および疑問点が発生致しましたので、下記に記述しときたいと思います。 １.下記のように、HTMLページ（sample）の画像タグの下に文字やJavaScriptの影響を受けない画像を記載したところ、両方とも表示されない問題が発生しました。 <!DOCTYPE html> <title>sample</title> <a href="A.html"> <img src="A.jpg" alt="AAA"> </a> <br> 下の画像が表示されない<br> <a href="Ｘ.html"> <img src="Ｘ.jpg" alt="ＸＸＸ"> </a> <br> 表示されない文字 ２.画像のリンクに青い枠ができてしまうので、消したい場合、JavaScriptの表記は下記のもので正しいでしょうか？一応、枠は消すことができました。 ----外部スクリプト--- /*@cc_on@*/ window./*@if(1)attachEvent('on'+@else@*/addEventListener( /*@end@*/'load', function(){ var data = [ ["A.html", "A.jpg", "AAA", 400, 200, 0], ["B.html", "B.jpg", "BBB", 100, 100, 0], ["C.html", "C.jpg", "CCC", 300, 300, 0], ["D.html", "D.jpg", "DDD", 200, 200, 0] ]; var d = data[Math.floor(Math.random() * data.length)], a = document.createElement("a"), img = document.createElement("img"), t, b = document.body; a.appendChild(img); a.href = d[0]; img.src = d[1]; img.alt = d[2]; img.style.width = d[3]+"px"; img.style.height = d[4]+"px"; img.style.border = d[5]+"px"; while(t=b.firstChild) b.removeChild(t); b.appendChild(a); }, false);
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 ＞メインのHTML（sample1.html）ソースはできるだけ少なくして、 ＞フレーム(sample2.html)とJavaScript(sample.js)の外部出力 ＞で作りたいのですが フレームを使用する意味が不明ですが、ソースを極力少なくというのならスクリプトオフの場合の表示だけを記述して、後はスクリプトで書き換えると言う風にでもすればよいのでは？ <!DOCTYPE html> <title>sample</title> <div id="randomImage"> <a href="A.html"> <img src="A.jpg" alt="A" style="width:400px; height:200px;"> </a> </div> ----外部スクリプト--- （全角空白は半角に） /*@cc_on@*/ window./*@if(1)attachEvent('on'+@else@*/addEventListener( /*@end@*/'load', function(){ var data = [ ["A.html", "A.jpg", "A_img", 400, 200], ["B.html", "B.jpg", "B_img", 100, 100], ["C.html", "C.jpg", "C_img", 300, 300], ["D.html", "D.jpg", "D_img", 200, 200] ]; var d = data[Math.floor(Math.random() * data.length)], e = document.getElementById("randomImage"), img = e.getElementsByTagName("img")[0]; e.getElementsByTagName("a")[0].href = d[0]; img.src = d[1]; img.alt = d[2]; img.style.width = d[3] + "px"; img.style.height = d[4] + "px"; }, false);
- fujillin
- ベストアンサー率61% (1594/2576)
ご提示の方法を拡張して、リンク先や画像のサイズを配列に定義しておく方法もあるかと思いますが… 先にHTMLソースに全部記載しておいて、そのうちの一つを表示するという方法ではいかがでしょうか？ スクリプトがオフの場合はクラスactiveの画像が表示され、スクリプトがオンの場合はランダムな表示になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #randomImages, #randomImages li { list-style-type:none; padding:0; margin:0; } #randomImages li { display:none; } #randomImages li.active { display:block; } </style> </head> <body> <ul id="randomImages"> <li class="active"> <a href="A.html"> <img src="A.jpg" alt="A" style="width:400px; height:200px;"> </a></li> <li><a href="B.html"> <img src="B.jpg" alt="B" style="width:100px; height:100px;"> </a></li> <li><a href="C.html"> <img src="C.jpg" alt="C" style="width:300px; height:300px;"> </a></li> <li><a href="D.html"> <img src="D.jpg" alt="D" style="width:200px; height:200px;"> </a></li> </ul> <script type="text/javascript"> <!-- (function(){ var list = document.getElementById("randomImages").getElementsByTagName("li"); var i, e, n = Math.floor(Math.random() * list.length)+1; for(i=0; e=list[i++];) e.className = i==n?"active":""; })(); //--> </script> </body> </html>
お礼
丁寧な回答有難う御座いました。 メインのHTML（sample1.html）ソースはできるだけ少なくして、フレーム(sample2.html)とJavaScript(sample.js)の外部出力で作りたいのですが、その場合以下のようにすれば良いでしょうか？ ご教授頂ければ幸いです。 【ＨＴＭＬソース sample1.html】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>sample1</title> </head> <body> <iframe src="sample2.html" width="200" height="200" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" allowtransparency="true"></iframe> </body> </html> 【外部ＨＴＭＬソース sample2.html】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>sample2</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #randomImages, #randomImages li { list-style-type:none; padding:0; margin:0; } #randomImages li { display:none; } #randomImages li.active { display:block; } </style> </head> <body> <ul id="randomImages"> <li class="active"> <a href="A.html"> <img src="A.jpg" alt="A" style="width:200px; height:200px;"> </a></li> <li><a href="B.html"> <img src="B.jpg" alt="B" style="width:200px; height:200px;"> </a></li> <li><a href="C.html"> <img src="C.jpg" alt="C" style="width:200px; height:200px;"> </a></li> <li><a href="D.html"> <img src="D.jpg" alt="D" style="width:200px; height:200px;"> </a></li> </ul> <script type="text/javascript"> <!-- (function(){ var list = document.getElementById("randomImages").getElementsByTagName("li"); var i, e, n = Math.floor(Math.random() * list.length)+1; for(i=0; e=list[i++];) e.className = i==n?"active":""; })(); //--> </script> </body> </html> 【JavaScriptの外部出力 sample.js】 sample2.htmlへの記述と sample.jsの記述がわかりません
補足
＃２の方法で無事にできました。有難うございました。 #2の訂正が＃３と思い、＃３しか試しておりませんでした。 もし宜しければ、#2の方法で現在画像をランダム表示にしておりますが、ランダム表示の表示割合を画像によって変更する方法をご存知でしたら、今回の質問で一緒に解決しておきたいので、＃２のソースに付け足す形でソースを示して頂ければ大変助かります。 宜しくお願い致します。