ランダムバナーをポップアップウィンドウで表示する方法

このQ&Aのポイント
  • JavaScriptを使用して、ランダムに表示されるバナーのリンク先をポップアップウィンドウで開く方法を教えてください。
  • 質問者はJavaScript初心者で、他のサイトを参考にしながら試していますが、バナーをクリックしてもポップアップウィンドウが表示されません。
  • この質問のポイントや問題点を指摘し、正しい記述方法やアドバイスを教えてください。
回答を見る
  • ベストアンサー

ランダムバナーのリンク先をポップアップウィンドウで開きたい。

ランダムバナーのリンク先をポップアップウィンドウで開きたい。 当方javascript初心者なのですが、色々なサイトを参考にして上記の方法を模索しています。 以下に記載する内容で画像をランダムに表示するところまで出来たのですが、 画像をクリックすると通常通り、リンク先に飛ぶだけでポップアップウィンドウが開きません。 この記述の間違い点、問題点をご指摘、助言をいただきたく思います。 よろしくお願いたします。 以下js記述↓ <SCRIPT language="JavaScript"> <!-- jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://google.com/"; jmp[2] = "http://www.microsoft.com/"; img[0] = "banner1.jpg"; img[1] = "banner2.jpg"; img[2] = "banner3.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' onClick='javascript:window.open('"+jmp[n]+"','','width=600'); return false;'>"); document.write("<img src='"+img[n]+"' border='0' width='100' height='100' />"); document.write("</a>"); //--> </SCRIPT>

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ダブルクォートの中のシングルクォートまでは良いけれど、さらにその中でシングルクォートを使っているのが問題なのでは? 確認していませんが、エスケープすればOKではないでしょうか?

yukachannel
質問者

お礼

さっそくの回答ありがとうございました。 教えていただきました通り、シングルクオートをエスケープしたところ↓ document.write("<a href='"+jmp[n]+"' onClick=\"javascript:window.open('"+jmp[n]+"','','width=600'); return false;\">"); ポップアップウインドウが開きました! 自分の勉強不足が恥ずかしいと思いながら、Javascriptをもっと勉強したくなりました。 本当に、本当にありがとうございました。

関連するQ&A

  • 画像をランダムに表示し、リンクもランダムにしたい

    下記の通りにしたら、ランダムに画像が表示され、 クリックすれば画像とペアになっているアドレス先に飛ぶことは出来たのですが そのときのリンク先をランダムにすることは出来ないでしょか? 例えば、img[2] の画像が表示された場合、jmp[2] ではなく 5つのアドレスの中からランダムにリンク先が決まる、 というようなことなんですが・・・。 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://~"; jmp[1] = "http://~"; jmp[2] = "http://~"; jmp[3] = "http://~"; jmp[4] = "http://~"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");

  • JSを用いてサイトを開いた際にランダムでバナー表示する仕組みを作りたい

    JSを用いてサイトを開いた際にランダムでバナー表示する仕組みを作りたいと思っているのですが、 2のバナーの時には別窓で開き1のバナーの時はセルフで開くような設定を施す場合は どの用に書けばいいでしょうか? 一応いろいろと調べて下記までは書いてみたのですが。。。 うまく動きません。。。 どなたか助けていただけませんでしょうか? よろしくお願いします。 <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); tgt = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "wwwwwww.com"; jmp[1] = "wwwwwww.com"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/01.jpg"; img[1] = "img/01r.jpg"; // ブランクの指定 tgt[0] = "_self"; tgt[1] = "_blank"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' target='"+tgt[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT>

  • 1万個からランダムリンクさせるには?

    1万個からランダムリンクさせたいのですが、 jmp〔0〕からjmp〔10000〕まで作ってしまうと 異常にソースが長くなり、読み込みが長くなってしまいました。 軽量化して読み込みを早したいのですが、いい方法はないでしょうか? 使用したソースです プログラム初心者ですので具体的に書いていただけるとうれしいです。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY bgcolor="#ffffff"> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img0.jpg"; img[1] = "img/img1.jpg"; img[2] = "img/img2.jpg"; img[3] = "img/img3.jpg"; img[4] = "img/img4.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT> </BODY> </HTML>

  • 一定時間で画像とリンク先を変換する

    DreamWeaverCS3でHPを製作しております、まだ初心者です。 リンクが設定してある画像を一定時間で変換していき、なおかつリンク先のページをポップアップウィンドウで開こうとしています。 下記コードでポップアップウィンドウは開くのですが一定時間での変換がうまくいきません。 どなたかご教授頂けませんでしょうか。 宜しくお願い致します。 <SCRIPT language="JavaScript"> <!-- var interval = 5000; //切り替わる時間(1000=1秒) jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "00000.html"; img[0] = "00000.jpg"; jmp[1] = "11111.html"; img[1] = "11111.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' onClick=\"javascript:window.open('"+jmp[n]+"','','width=400,height=380'); return false;\">"); document.write("<img src='"+img[n]+"' border='0' width='300' height='25' />"); document.write("</a>"); setInterval(function(){ //--> </SCRIPT>

  • それぞれの画像をオンマウスのときに違う画像にしたい

    下記【1】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか? JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://~" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像3枚)にしたいのですが。 【1】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://~"; jmp[1] = "http://~"; jmp[2] = "http://~"; jmp[3] = "http://~"; jmp[4] = "http://~"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");

  • バナーのランダム表示と外部リンク計測について

    初めまして。 Java初心者です。よろしくお願い致します。 現在、自サイトにバナー画像がランダムで表示される様に貼り付けて、尚かつそれぞれのバナーがクリックされた回数を計測したいと考えています。 ランダム表示に関しては、現在以下のソースで対応させています。 <script type="text/javascript"> <!-- url = new Array(); img = new Array(); tar = 'target="_blank"'; url[0] = "画像1のリンク先URL"; img[0] = "画像1"; url[1] = "画像2のリンク先URL"; img[1] = "画像2"; N = Math.round(Math.random() * (url.length - 1)); DISP = "<a href='" + url[N] + "' " + tar + "> <img src='" + img[N] + "' border=0></a>"; --> </script> <script> <!-- document.write(DISP); --> </script> これに外部リンクへのクリック数を追う機能を追加するにはどうすればよいでしょうか? 宜しくお願い致します!

  • ランダム表示

    某サイトで このようなスプリクトを手に入れたのですが 設置した際に 横310X縦190と言う 表示画像サイズの指定の仕方が わかりません いろいろ 試したのですが 素人のため なかなか うまくいきません 下のスプリクトにどこにどのようなタグを入れていいのか教えてください  皆様お力を貸してください <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img0.jpg"; img[1] = "img/img1.jpg"; img[2] = "img/img2.jpg"; img[3] = "img/img3.jpg"; img[4] = "img/img4.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT>

  • バナーのランダム表示のリンクを別窓で開きたい

    バナーのランダム表示は出来るのですが、それらを開くとき 別窓で開きたいのですが、どうしたら良いのでしょうか? 下記が現在使用しているJavaScriptです。これに何かを足せば リンクを別窓で開けるのでしょうか? <script language="JavaScript"><!-- jumpURL = new Array(); imgURL = new Array(); jumpURL[0] = "リンクURL0"; jumpURL[1] = "リンクURL1"; jumpURL[2] = "リンクURL2"; jumpURL[3] = "リンクURL3"; imgURL[0] = "画像URL0"; imgURL[1] = "画像URL1"; imgURL[2] = "画像URL2"; imgURL[3] = "画像URL3"; n = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[n]+"'>"); document.write("<img src='"+imgURL[n]+"' border='0'>"); document.write("</a>"); // --></script> 以上です。宜しくお願い致します。

  • 外部ファイルにしたら文字化けしてしまいました

    FC2ブログで下記【1】を <script type="text/javascript"> <!-- 【1】 // --> </script> で囲んで直接プラグインに書き込んだら 文字化けせずに表示されたのですが、 外部ファイルにして <script type="text/javascript" src="【1】のJSファイルのパス"></script> をプラグインに書き込んだら、 画像リンクはうまく表示されたのですが、 文字化けしてしまいました。 文字化けしない方法はないでしょうか? 【1】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://~"; jmp[1] = "http://~"; jmp[2] = "http://~"; jmp[3] = "http://~"; jmp[4] = "http://~"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");

  • target="new"を書き込む場所

    私はあるサイトを作成しているのですが、そのサイトのトップページで静止画像をランダムに表示させています。更新ボタンを押すたびに静止画像が変わるというものです。そしてその静止画像をクリックすると、ある特定のホームページにリンクしています。下記はそのソースです。 この静止画像をクリックしても、タブをもう一つ開いてリンクしていません。同じタブで切り替わるだけです。HTMLでしたら、target="new"になっていないということです。そこでお聞きしたいのですが、下記のJavaScriptでtarget="new"にするにはどこにこれを書き込めばいいのでしょうか? また、サイトを開くたびにランダムに静止画像を表示させるだけでなく、静止画像を数秒ごとに切り替えるソースをご存知の方がいらっしゃいましたら、ぜひご教授ください。よろしくお願いします。 <!--ランダム広告ココから--> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.○○○"; jmp[1] = "http://www.□□□"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/○/○420x200.jpg"; img[1] = "img/□/□420x200.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT> <!--ランダム広告ココまで-->

専門家に質問してみよう