このスクリプトで画像クリック時に新しいウインドウでサイトが開くようにする方法

このQ&Aのポイント
  • 画像クリック時に新しいウインドウでサイトが開く方法を教えてください。
  • target="_blank"属性を使用することはできませんか?
  • <a href="javascript:jump()" ><img src="http://bbs3.aimix-z.com/gbbsimg/kondo/3395.jpg" height="100" /></a>というコードのスクリプトを使用して、画像クリック時にランダムなサイトが新しいウインドウで開かれるようにする方法を教えてください。
回答を見る
  • ベストアンサー

このスクリプトで画像クリック時に新しいウインドウでサイトが開くようにす

このスクリプトで画像クリック時に新しいウインドウでサイトが開くようにするやり方を教えてください。target="_blank"は使えませんか? <a href="javascript:jump()" ><img src="http://bbs3.aimix-z.com/gbbsimg/kondo/3395.jpg"height="100" /></a> <script> url = new Array(); url[0]="http://www.goo.ne.jp/" url[1]="http://www.google.co.jp/" function jump() { p = Math.floor(Math.random() * url.length ); top.location.href = url[p]; } </script>

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

  • ベストアンサー
  • zeff
  • ベストアンサー率69% (137/198)
回答No.2

※#1さんとは別人です。 window.openでしょうか。 <script type="text/javascript"> <!-- function jump() { var url = new Array( 'http://www.goo.ne.jp/', 'http://www.google.co.jp/' ); var p = Math.floor(Math.random() * url.length );  window.open(url[p],""); } --> </script> </head> <body> <img src="http://bbs3.aimix-z.com/gbbsimg/kondo/3395.jpg"height="100" onclick="jump()" /> </body> </html>

koyukiran
質問者

補足

回答ありがとうございます。 こちらのやり方だとカーソル合わせてもリンクかどうかわからないのでカーソル合わせた時にポインタがリンクに合わせたときのような変化にすることはできますか?

その他の回答 (8)

  • think49
  • ベストアンサー率59% (285/482)
回答No.9

ぎゃーす! 私もビール飲めません。

回答No.8

みっけ! @if(@_jscript<=5.8) @if(@_jscript_version <= 5.8) おれいなんていらないよ! まじ。びーるものめないし

  • think49
  • ベストアンサー率59% (285/482)
回答No.7

#1,6です。 すみません。#3の補足を読み逃していました。 確かにマウスホバー時のリンクと違う場所に飛ぶのはいい気持ちしないですね。 #5 でbabu_babooさんが回答されているように、mouseoverを利用すれば可能だと思います。 以下、#6 を「click → mouseover」しただけのスクリプト。(全角空白は半角空白にしてください) --------- <script type="text/javascript"> //<![CDATA[ document./*@cc_on @if(@_jscript<=5.8) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'mouseover', function (event) {  var target = event.target || event.srcElement;  var a = target.nodeName === 'IMG' ? target.parentNode : target;  if(a.nodeName !== 'A' || a.className !== 'randomLink'){ return false; }  console.log(a);  var url = ['http://www.goo.ne.jp/', 'http://www.google.co.jp/'];  a.href = url[Math.floor(Math.random() * url.length )]; },false); //]]> </script> </head> <body> <p><a class="randomLink" href="http://www.goo.ne.jp/" target="_blank"><img src="http://bbs3.aimix-z.com/gbbsimg/kondo/3395.jpg" height="100" alt="test" /></a></p> <p><a class="randomLink" href="http://www.goo.ne.jp/" target="_blank">test</a></p> ---------

  • think49
  • ベストアンサー率59% (285/482)
回答No.6

#1です。 <img> を入れると、event.target の参照先がimg要素ノードになるのを失念していました…。 img にイベントをフックするのは何となく悔しいので、イベントバブルで頑張ってみたり。 (全角空白は半角空白にしてください) --------- <script type="text/javascript"> //<![CDATA[ document./*@cc_on @if(@_jscript<=5.8) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'click', function (event) {  var target = event.target || event.srcElement;  var a = target.nodeName === 'IMG' ? target.parentNode : target;  if(a.nodeName !== 'A' || a.className !== 'randomLink'){ return false; }  var url = ['http://www.goo.ne.jp/', 'http://www.google.co.jp/'];  a.href = url[Math.floor(Math.random() * url.length )]; },false); //]]> </script> </head> <body> <p><a class="randomLink" href="http://www.goo.ne.jp/" target="_blank"><img src="http://bbs3.aimix-z.com/gbbsimg/kondo/3395.jpg" height="100" alt="test" /></a></p> <p><a class="randomLink" href="http://www.goo.ne.jp/" target="_blank">test</a></p> ---------

koyukiran
質問者

補足

回答ありがとうござます。 <scriptから</script>はjsファイルにまとめてやっているのですが なぜかIEだけ▲のリンクをクリック(厳密に言うとサイト内の他のリンクも)しても全て無反応になってしまうバグがおきました。 firefoxとoperaは大丈夫でした。 ソース↓ <a class="randomLink" href="◆"target="_blank"><img src="★"alt="" border="0" height="150" /></a><a class="randomLink" href="◆" target="_blank"></a><script type="text/javascript" src="http:***.js" charset="utf-8"></script> <font size="2"> <a href="★" target="_blank">▲</a>  </FONT> (1)↓JSファイルの中身↓ document./*@cc_on @if(@_jscript<=5.8) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'click', function (event) {  var target = event.target || event.srcElement;  var a = target.nodeName === 'IMG' ? target.parentNode : target;  if(a.nodeName !== 'A' || a.className !== 'randomLink'){ return false; }  var url = ['http://www.goo.ne.jp/', 'http://www.google.co.jp/'];  a.href = url[Math.floor(Math.random() * url.length )]; },false); ↑JSファイルの中身↑ (2)↓JSファイルの中身↓ //<![CDATA[ document./*@cc_on @if(@_jscript<=5.8) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'click', function (event) {  var target = event.target || event.srcElement;  var a = target.nodeName === 'IMG' ? target.parentNode : target;  if(a.nodeName !== 'A' || a.className !== 'randomLink'){ return false; }  var url = ['http://www.goo.ne.jp/', 'http://www.google.co.jp/'];  a.href = url[Math.floor(Math.random() * url.length )]; },false); //]]> ↑JSファイルの中身↑ (1)と(2)両方試しましたがだめだったです。 ちなみにjsファイルにしないでそのまま記載すると通常通り反応しました。 それとjsファイルを消したらちゃんと反応しましたので原因は中身だと思うのですが jsファイルのまとめ方が間違ってますか?

回答No.5

ぼそっつと。 <p>  <a href="http://www.goo.ne.jp/" target="_blank">   <img src="test.jpg" alt="hoge" width="100" height="100"    onmouseover="     this.parentNode.href = [      'http://okwave.jp/qa/q5905356.html',      'http://okwave.jp/qa/q5905356.html'     ][ Math.random() * 2 |0 ];    ">  </a> </p>

  • zeff
  • ベストアンサー率69% (137/198)
回答No.4

zeffです。 ステータスバーに表示させるのは window.status なんですがIE7,8,Firefoxではどうやらブロックされるらしく。 といって<a href>を戻して、 オンマウスした瞬間にhrefを書き換えてみても、 OperaではOKでしたがIE8とFirefoxで試したところ、 元のa href=""の中身がステータスに表示されてしまいました。 クリックするとちゃんとランダムジャンプするのですが。 そうなるとtitleに出す案ぐらいしか浮かびませんでした。 でもこれもブロックしてしまう状況がありそうな気が。 じゃなきゃwindow.onload時にランダムを確定させて、 hrefを書き換えるかなのかなぁ。 ちょっと頭が迷走してしまっているので、他の回答を待ってみてください。 お急ぎなのにすみません^^; 「titleに出す案」 ※pは2つの関数にまたがって使うのでvar宣言は外に出します。 <style type="text/css"> <!-- img{ cursor:pointer; } --> </style> <script type="text/javascript"> <!-- var url = new Array( 'http://www.goo.ne.jp/', 'http://www.google.co.jp/' ); var p; function showURL(t){ p = Math.floor(Math.random() * url.length ); t.title= url[p]; } function jump() {  window.open(url[p],""); } --> </script> </head> <body> <img src="http://bbs3.aimix-z.com/gbbsimg/kondo/3395.jpg" height="100" onclick="jump()" onmouseover = "showURL(this)" title="" /> </body> </html>

  • zeff
  • ベストアンサー率69% (137/198)
回答No.3

#2のzeffです。 >こちらのやり方だとカーソル合わせてもリンクかどうかわからないのでカーソル合わせた時にポインタがリンクに合わせたときのような変化にすることはできますか? スタイルシートで img{ cursor:pointer; } と書くだけでOKです。マウスが乗ると手の形になります。 特定のところだと思うのでclassとかidで img.rdmlink{ cursor:pointer; } <img class="rdmlink" ~ onclick~ />という感じですね。 さらにマウスオーバーで装飾する場合は、 imgに対してonmouseover/onmouseoutで行なってください。 あとさっき書き忘れましたがXHTMLだしaltを書くべきでしょう。

koyukiran
質問者

補足

回答ありがとうございます。 ランダムリンクできました。 一つ直したいのがカーソル合わせた時に通常通りにリンク先をステータスバーに表示したいのですがやり方ありますか?

  • think49
  • ベストアンサー率59% (285/482)
回答No.1

target="_blank" は使えます。 (以下、全角空白を半角空白にしてください。) <script type="text/javascript"> //<![CDATA[ function jump(event) {  var a = event.target || event.srcElement;  var url = ['http://www.goo.ne.jp/', 'http://www.google.co.jp/'];  a.href = url[Math.floor(Math.random() * url.length )]; } //]]> </script> <p><a href="http://www.goo.ne.jp/" target="_blank" onclick="jump(event);">test</a></p>

koyukiran
質問者

補足

回答ありがとうございます。 最後のtestの所を<img src="http://bbs3.aimix-z.com/gbbsimg/kondo/3395.jpg"height="100" />に書き換えるとランダムにならずgooにしか飛ばないのですがなにか間違ってますか?

関連するQ&A

  • 画像からランダムリンク

    Javascriptでランダムリンクをする場合、 <form> <input type=button onClick="jump()" value="ランダム"> </form> <script> url = new Array(); url[0] = "00.html"; url[1] = "01.html"; url[2] = "02.html"; function jump() { p = Math.round(Math.random() * (url.length - 1)); parent.top.document.location = url[p]; } </script> という記述を使うのは知っているんですが、 「ランダムリンク」というボタンではなく、 画像をクリックしてランダムリンクさせることは可能でしょうか? Javascriptでは無理な場合、 画像からランダムリンクを張る方法はありますか? CGI等でも構いませんので、お勧めがあれば教えてください。

  • リンクのクリック数を把握したい

    現在、以下のようなjavascriptを書いて、リンクを作っています。 <script type="text/javascript"> <!-- A01=new Array(); A01[0]='<a href="http://www.yahoo.co.jp/" target="blank">yahoo</a>'; A01[1]='<a href="http://www.google.co.jp/" target="blank">google</a>'; a01=Math.floor(Math.random()*A01.length); B01=new Array(); B01[0]='<a href="http://www.livedoor.co.jp/" target="blank">livedoor</a>'; B01[1]='<a href="http://www.goo.co.jp/" target="blank">goo</a>'; b01=Math.floor(Math.random()*B01.length); --> </script> とgoogleとyahoo、;livedoorとgooを配列に入れておき、 どちらかがランダムで出てくるようにして実際の表示部に以下を配置しています。 <script type="text/javascript"> <!-- document.write(A01[a01]); --> </script> <script type="text/javascript"> <!-- document.write(B01[b01]); --> </script> このスクリプトで、A01(yahoo or google)とB01 (livedoor or goo)が それぞれ何回クリックされたのかを把握したいです。 どのようにすれば良いか、ご教示頂けると幸いです。

  • 画像をランダムにスクリプト

    ホームページをHTMLで作成しております。画像をランダムにスクリプトしてますが、画像のサイズが大きすぎるので、HTMLでサイズ変更する場合の、HTMLをご教授ください。 width="300" height="200"を挿入でいいのでしょうか。 その場合の挿入箇所をお教えください。 現在、下記のHTMLを作成しております。 <script language="JavaScript"> <!-- var image=new Array (); image[0]="s/b/bike1.jpg" ; image[1]="s/h/hatake207.jpg"; var rnd=Math.floor(Math.random()*image.length); document.write(" <img src=' "+image[ rnd ]+ " '> "); //--> </script> 宜しくお願いします。

  • java scriptでhttp://A....のサイトにボタンを押さ

    java scriptでhttp://A....のサイトにボタンを押さずに10秒後に飛びたいのですが、 ボタンを押さずに飛べるのでしょうか? <script language="JavaScript"><!-- function jump() { location.href = "http://A...."; } // --></script> </head> <body onLoad="setTimeout('jump()',10000)"> を使うと[別サイトにジャンプします はい いいえ]とテロップが出てきてしまい、はい を選択しなければジャンプできません。 10秒後に自動的にhttp://A....のサイトに飛ぶにはどうすればいいですか?ボタンを押した事にはできないでしょうか? 困っています。よろしくお願いいたします。

  • ランダムリンクを新しいページで開く方法

    <a href="リンク先1" onclick="var urls=['リンク先2','リンク先3','リンク先4'];location.href=urls[Math.floor(Math.random()*urls.length)];return false">リンク</a> 上記のタグにtarget="_blank"か何かを追加して別ウインドウで開く方法を探しております。 よろしくお願いします!

  • java scriptで新しいウィンドゥを開く

    クリックすると、アドレスバー等がない新しいウィンドゥで開く…という風にしたいのですが、うまく行きません。 以下のようにやってみたのですが、何処が間違っているのでしょうか? <script language="JavaScript"> <!-- function winopen(url){ win=window.open(url,"host","scrollbars=1,width=717,height=700"); } //--> </script><FONT size="+1"><B><A href="ブログのアドレス" target="_blank" onclick="Javascript:winopen('ブログのアドレス');return false;">ここをクリック</A></B></FONT>

    • ベストアンサー
    • HTML
  • 以前の質問で、

    「あるリンクをクリックすると登録してある複数のURLからランダムで選ばれてジャンプする」というのはありますか? ポイントは最初のリンクテキスト(画像)は同じものを常に表示させたいことです。 要するににクリックして当たりページが出る確率は1/10で、それ以外はハズレページというのを作りたいんです。 お願いします。 という質問がありましたが、 <Script> var url = new Array; url[0] = "0.html"; url[1] = "1.html"; url[2] = "2.html"; url[3] = "3.html"; url[4] = "4.html"; url[5] = "5.html"; url[6] = "6.html"; url[7] = "7.html"; url[8] = "8.html"; url[9] = "9.html"; function click() { var ran = Math.floor(Math.random()*url.length); location.href = url[ran]; } </Script> <A HREF="JavaScript:click()">リンク</A> では、リンク先に飛ばなかったんですが、何が原因でしょうか?

  • JavaScript フレーム

    Javascriptをふたつ書くことはできないんですか? 2つ書いたら「い」のほうしか宣言されないんでどうしたらよろしいですか? Update.java,kensaku2.java syouhin_kensaku.html,syouhin_master.html <html> <head> <title>メニュー</title> </head> <body> <script type="text/javascript"> <!-- function jump(){ // 設定開始(表示するフレーム名とリンク先URLを設定してください) parent.hakusi.location.href = "syouhin_kensaku.html"; parent.hakusi2.location.href = "Update"; // 設定終了 } // --> </script> <a href="#" onClick="jump(); return false;">あ</a> <br> <br> <script> <!-- function jump(){ parent.hakusi.location.href = "syouhin_master.html"; parent.hakusi2.location.href = "kensaku2"; //設定終了 } // --> </script> <br> <a href="#" onClick="jump(); return false;">い</a> <br> <br> </body> </html>

  • 画像がうまく表示されないのですが

    ページを見るごとにランダムで画像が変わるタグを書き込んだのですが・・・ タグ1 <script language="JavaScript"> <!-- var simg=new Array(5); simg[0]="icon1.png"; simg[1]="icon2.png"; simg[2]="icon3.png"; simg[3]="icon4.png"; simg[4]="icon5.png"; var Myimg=Math.floor(5*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </script> タグ2 <SCRIPT LANGUAGE="JavaScript"> <!-- simg=new Array(2); simg[0]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; simg[1]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; Myimg=Math.floor(2*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </SCRIPT> タグ1はインフォシークのサーバーでは表示されたのですが、A-RINGSのサーバーでは表示されなかったので、サーバーの問題で表示されないのでしょうか? 表示されないとしたらどのようにしたら表示されるものなのでしょうか? タグ2はどちらのサーバーも表示されませんでした。 どうしたらちゃんと表示されますでしょうか?

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

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

専門家に質問してみよう