重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：koyukiran
  • 質問日時：
  • 回答数：9件

このスクリプトで画像クリック時に新しいウインドウでサイトが開くようにするやり方を教えてください。target="_blank"は使えませんか？

<a href="javascript:jump()" ><img src="http://bbs3.aimix-z.com/gbbsimg/kondo/3395.jpg"h … /></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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (9件)

No.2ベストアンサー

  • 回答者： zeff#1
  • 回答日時：

※#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"h … onclick="jump()" />
</body>
</html>

この回答への補足

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

補足日時：2010/05/19 10:17
通報する
    • good
    • 0
    • 件
通報する

No.9

  • 回答者： think49
  • 回答日時：

ぎゃーす！


私もビール飲めません。
    • good
    • 0
    • 件
通報する

No.8

  • 回答者： babu_baboo
  • 回答日時：

みっけ！


@if(@_jscript<=5.8)

@if(@_jscript_version <= 5.8)

おれいなんていらないよ！
まじ。びーるものめないし
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： think49
  • 回答日時：

#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>
---------
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： think49
  • 回答日時：

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

この回答への補足

回答ありがとうござます。
<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)↓ＪＳファイルの中身↓

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

↑ＪＳファイルの中身↑

(2)↓ＪＳファイルの中身↓

//<![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);
//]]>

↑ＪＳファイルの中身↑
(1)と(2)両方試しましたがだめだったです。
ちなみにjsファイルにしないでそのまま記載すると通常通り反応しました。
それとjsファイルを消したらちゃんと反応しましたので原因は中身だと思うのですが
jsファイルのまとめ方が間違ってますか？

補足日時：2010/05/20 07:54
通報する
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： babu_baboo
  • 回答日時：

ぼそっつと。



<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://oshiete.goo.ne.jp/qa/5905356.html',
　　　　 'http://okwave.jp/qa/q5905356.html'
　　　 ][ Math.random() * 2 |0 ];
　　 ">
　</a>
</p>
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： zeff#1
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： zeff#1
  • 回答日時：

#2のzeffです。



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

スタイルシートで
img{
cursor:pointer;
}

と書くだけでOKです。マウスが乗ると手の形になります。

特定のところだと思うのでclassとかidで
img.rdmlink{
cursor:pointer;
}

<img class="rdmlink" ～　onclick～ />という感じですね。

さらにマウスオーバーで装飾する場合は、
imgに対してonmouseover/onmouseoutで行なってください。

あとさっき書き忘れましたがXHTMLだしaltを書くべきでしょう。

この回答への補足

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

補足日時：2010/05/19 13:40
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： think49
  • 回答日時：

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>

この回答への補足

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

補足日時：2010/05/19 03:37
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報