以下のソースで表示される二つの画像にそれぞれ別のリンク先を設定したいのですが可能でしょうか？
できましたら複数になった場合も含めて教えていただけると助かります。
<IMG SRC="hoge1.gif"NAME="img">
<SCRIPT LANGUAGE="Javascript">
var num=2;
function timer(){
if(document.img.complete){
document.img.src="hoge"+num+".gif";
num++;if(num>2)num=1;
}
setTimeout('timer()',3000);
}
</SCRIPT>
No.1
34
5
27pt
こんな感じでよろしいでしょうか？
<BODY onload="timer()"> <a href="hoge1.html" id="link"><IMG SRC="hoge1.gif" NAME="img"></a> <SCRIPT LANGUAGE="Javascript"> <!-- var num = 2; function timer(){ if (document.img.complete) { document.img.src = "hoge" + num + ".gif"; // リンク先変更 document.getElementById('link').href = "hoge" + num + ".html"; num++; if(num > 2) { num = 1; } } setTimeout('timer()', 1000); } //--> </SCRIPT> </BODY>
IE6 SP2とFireFox2.0.0.9で動作確認しました。
No.2
20
27pt
blueberrystream さんの回答をもとに手をくわえました。
<BODY onload="timer()">
<a href="http://www.hatena.ne.jp/" id="link"><IMG SRC="hoge1.gif" NAME="img"></a>
<SCRIPT LANGUAGE="Javascript">
<!--
var num = 2;
function timer(){
if (document.img.complete) {
document.img.src = "hoge" + num + ".gif";
// リンク先変更
document.getElementById('link').href = "http://q.hatena.ne.jp/";
num++;
if(num > 2) {
num = 1;
document.getElementById('link').href = "http://www.hatena.ne.jp/";
}
}
setTimeout('timer()', 3000);
}
//-->
</SCRIPT>
</BODY>
どうでしょうか？
No.3
345
26pt
document.getElementById('link').href は <a href="hoge1.html" id="link"> の
href属性の中身を指しています。なので、
144
138
document.getElementById('link').href = "hoge" + num + ".html";
の "hoge" + num + ".html" を変更すれば飛ばしたいURLを変更できます。
もしかしたら、こっちのほうがわかりやすいかもしれません。
<BODY onload="timer()"> <a href="http://h.hatena.ne.jp/" id="link"><IMG SRC="hoge1.gif" NAME="img"></a> <SCRIPT LANGUAGE="Javascript"> <!-- var num = 2; function timer(){ if (document.img.complete) { document.img.src = "hoge" + num + ".gif"; // リンク先変更 //document.getElementById('link').href = "hoge" + num + ".html"; switch (num) { case 1: // hoge1.gifのとき document.getElementById('link').href = "http://h.hatena.ne.jp/"; break; case 2: // hoge2.gifのとき document.getElementById('link').href = "http://q.hatena.ne.jp/1200017304"; break; default: // なにもしない } num++; if(num > 2) { num = 1; } } setTimeout('timer()', 3000); } //--> </SCRIPT> </BODY>
それと、最初の回答のソースで…
setTimeout('timer()', 1000);
3000から1000に変更してました。
No.4
1314393
10pt
定義したデータを順番に表示する例です。
データが増えた場合は、Array の部分を追加すればそのまま動くかと思います。
<html>
<header>
</header>
<SCRIPT LANGUAGE="Javascript">
var num=0;
var img_data = Array(
// 画像ファイル名 / URL リンク
Array( "hoge1.jpg", "http://www.yahoo.co.jp" ),
Array( "hoge2.jpg", "http://www.google.co.jp" ),
Array( "hoge3.jpg", "http://hatena.ne.jp" ) );
function timer(){
if ( document.getElementById('img_obj') != null ) {
if ( document.getElementById('img_obj').complete == false ) return;
}
document.getElementById('img_area').innerHTML
= "<a href=\"" + img_data[num][1] + "\" target=\"_blank\">"
+ "<img id=\"img_obj\" src=\"" + img_data[num][0] + "\"></a>";
if( ++num >= img_data.length ) num=0;
setTimeout('timer()',3000);
}
</SCRIPT>
<body onload="timer();">
<div id="img_area"></div>
</body>
</html>
1
2
1
2
1
こんにちは、回答ありがとうございます。
飛ばしたい二つのURLが既存なものなのでこの方法だとダメのようです。
ドメインも別なので・・・・
また思いついたら回答いただけたら幸いです。