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

このQ&Aのポイント
  • サイトを開いた際にランダムでバナーを表示するためのJSの仕組みを作りたい。
  • バナーはランダムに表示され、設定によって新しいウィンドウで開いたり同じウィンドウで開いたりする。
  • 現在のコードではうまく動作していないので、修正方法を教えてほしい。
回答を見る
  • ベストアンサー

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>

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

  • ベストアンサー
  • neepon
  • ベストアンサー率100% (3/3)
回答No.2

同条件のJSを作ってみました。 但し、バナーはn:n対応の処理になっています。 参考にどうぞ! <SCRIPT language="JavaScript"> <!-- var BrNum = 1; //表示するバナー件数 var toRandomNum = 0; var aRDM = new Array(); var aLNK = new Array(); i = 0; aLNK[i++] = new MakeTable("01.jpg","http://www.111111.com/","_self"); aLNK[i++] = new MakeTable("02.jpg","http://www.222222.com/","_blank"); //================================== // TABLE CREATE FUNCTION //================================== function MakeTable(ImgFile,SiteUrl,LinkTarget){ this.IMG = ImgFile; this.URL = SiteUrl; this.TGT = LinkTarget; return this; } // ランダム処理 beRandom(); // 書き込み処理 for (j = 0; j < BrNum; j++){ document.write("<a href='"+aLNK[aRDM[j]].URL+"'><img src='"+aLNK[aRDM[j]].IMG+"' target='"+aLNK[aRDM[j]].TGT+"' border='0'></a>"); } //================================== // ランダム処理 //================================== function beRandom(){ toSet = 0; do{ for (i=0;i<aLNK.length;i++){ if (beCheck() == 0){ aRDM[toSet] = toRandomNum; toSet++; } } }while(toSet < aLNK.length) } function beCheck(){ toRandomNum = Math.floor(Math.random()*(aLNK.length)); for (j=0;j<toSet;j++){ if (aRDM[j] == toRandomNum){ return 1; } } return 0; } //--> </SCRIPT>

guchi_sun
質問者

お礼

ありがとうございます! 試してみたいと思います。

その他の回答 (1)

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

それで書き出されるHTMLは以下のようになるけれど、HTMLがおかしくない? <a href='wwwwwww.com'> <img src='img/01r.jpg' target='_blank' border='0'> </a>           ↓ <a href='wwwwwww.com' target='_blank'></a>

guchi_sun
質問者

お礼

本当ですね。。。すいません。。。 一応 n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='"+tgt[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); 書き換えてみたのですが。。。 今度は画像自体がきえてしまいました。。。

関連する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>");

  • ランダム表示

    某サイトで このようなスプリクトを手に入れたのですが 設置した際に 横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初心者なのですが、色々なサイトを参考にして上記の方法を模索しています。 以下に記載する内容で画像をランダムに表示するところまで出来たのですが、 画像をクリックすると通常通り、リンク先に飛ぶだけでポップアップウィンドウが開きません。 この記述の間違い点、問題点をご指摘、助言をいただきたく思います。 よろしくお願いたします。 以下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>

  • ランダム表示画像へ説明文を表示したい。

    ランダムな画像表示に対しそれぞれへの個別リンク設定をし、 個々の画像にカーソルを重ねた時に説明文を表示するようにしようと思っています。 画像とリンクはうまくいっているのですが説明文が表示されません 記述は下記のようにしました。 間違っているところを訂正していただけないでしょうか、 お願いします。 <script language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.marucho-powertec.com/contents/powercool.html"; jmp[1] = "http://www.marucho.co.jp/mbs/cnts/option1/?c=seakayak"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "image/k_imgae/index/event/h23powercool.gif","遮熱塗料パワークール"; img[1] = "image/k_imgae/index/event/h23.08.18.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>

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

    初めまして。 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> これに外部リンクへのクリック数を追う機能を追加するにはどうすればよいでしょうか? 宜しくお願い致します!

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

    バナーのランダム表示は出来るのですが、それらを開くとき 別窓で開きたいのですが、どうしたら良いのでしょうか? 下記が現在使用している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> 以上です。宜しくお願い致します。

  • 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>

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

    下記【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>");

  • 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> <!--ランダム広告ココまで-->

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

    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>");

専門家に質問してみよう