人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

いつもお世話になっております。
以下のソースで表示される二つの画像にそれぞれ別のリンク先を設定したいのですが可能でしょうか?
できましたら複数になった場合も含めて教えていただけると助かります。

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

●質問者: mika555
●カテゴリ:ウェブ制作
✍キーワード:GIF hoge SRC ソース リンク
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● KID the Euforia
●27ポイント

こんな感じでよろしいでしょうか?

<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で動作確認しました。


http://dummy

◎質問者からの返答

こんにちは、回答ありがとうございます。

飛ばしたい二つのURLが既存なものなのでこの方法だとダメのようです。

ドメインも別なので・・・・

また思いついたら回答いただけたら幸いです。


2 ● fumiko_t
●27ポイント

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>


どうでしょうか?


3 ● KID the Euforia
●26ポイント

document.getElementById('link').href は <a href="hoge1.html" id="link"> の

href属性の中身を指しています。なので、

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に変更してました。


http://dummy


4 ● Mook
●10ポイント

定義したデータを順番に表示する例です。

データが増えた場合は、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>

http://www.openspc2.org/JavaScript/JavaScript_DOM/

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ