リンク先がそれぞれ別の画像のローテーション表示

解決済

質問者：cheb
質問日時：2004/12/07 14:22
回答数：2件

3枚の画像をタイマー設定して、ローテーション表示させるバナーを作成したいのですが、それぞれの画像に別のリンク先を設定する記述方法を教えて下さい。
とりあえず、ローテーション表示させるために、下記のように記述してみました。

<html>
<head>
<title>画像切替とリンク先</title>
<script language="JavaScript">
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<a href="#"><img src="01.gif" name="gazo" onLoad="setTimeout('anime()',12000)" border=0></a>
</body>
</html>

まったく他の記述方法でもOKです。
宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： lead1976
回答日時：2004/12/08 03:41

横槍を入れるようで恐縮ですが…

先の方への補足を読ませていただきました。

補足の中で問題になっている画像とリンク先のずれについては、画像を入れ替えさせている部分の記述の仕方に原因があるようです。
質問者様のソースでは、

document.gazo.src=Imgs[cnt++];

と記述されていますが、この記述だとgazoのimg要素の参照先を配列Imgsのcnt番目の要素のURLに変え、その後にcntに1を加える処理になっているようです。インクリメントの処理が、画像を入れ替えた後に行われるため、この関数の処理が終了した時点で保持されているcntが、表示されている画像のURLを収めた配列の要素番号に1を加えた値になり、リンククリックの時のページジャンプ先が思惑とはずれているものと思われます。
この部分を修正すれば、配列内容の順番を入れ替えなくても対応できると思います。

以下、具体的な修正案です。

<html>
<head>
<title>画像切替とリンク先</title>
<script language="JavaScript">
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<a href="#" onClick="location_href(); return false;"><img src="01.gif" name="gazo" onLoad="setTimeout('anime()',12000)" border=0></a>
</body>
</html>

ウィンドウを開く処理のソースを簡素化するために、ジャンプ先のURLも配列に収めるようにしました。
また、常に新しいウィンドウで表示させることを狙っているものと判断して、ウィンドウ名も修正してあります。 (常に新しいウィンドウを開く場合には、元ソースでは"blank"となっている部分は、"_blank"と表記する必要があるでしょう) もし同じウィンドウを再利用したい場合は、この_blankの部分に任意の名前を半角英数で付けてください。
あと、リンクのonClickに対しては、通常のa要素のページジャンプ処理を止めるためにreturn falseを追加しました。

横から失礼しました。参考まで…

- 0
- 件

通報する

この回答へのお礼

お礼が大変遅くなりまして、本当に申し訳ありません。アドバイス、ありがとうございました。おかげさまで、希望どおりの動きを作ることができました。ソースの説明もとても解りやすく書いていただいて、助かりました。

通報する

お礼日時：2004/12/08 20:44

No.1

回答者： BLUEPIXY
回答日時：2004/12/07 16:09

var hrefs=new Array(3) //３つの時は３ですよ

hrefs[0]="01.html";
hrefs[1]="02.html";
hrefs[2]="03.html";
とかして
<a href="#">を
<a ID="ROTLINK" href="#">
とかして
document.gazo.src=Imgs[cnt++];の次に
document.getElementById("ROTLINK").href=hrefs[cnt];
とすればいいのではないでしょうか

この回答への補足

お返事ありがとうございました。

実は、リンク先を別ウィンドウで表示させたかったこともあり、その後試行錯誤の上、下記のように書いてみました。

<html>
<head>
<title>画像切替とリンク先</title>
<script language="JavaScript">
</script>

</head>

<body bgcolor="#FFFFFF" text="#000000">
<a href="#" onClick="location_href();"><img src="01.gif" name="gazo" onLoad="setTimeout('anime()',12000)" border=0></a>
</body>
</html>

しかし、どうしても画像の順番ととリンク先の順番がずれてしまうので、画像のローテーション表示を
var Imgs=new Array(3);
var cnt=0;
Imgs[0]="02.gif";
Imgs[1]="03.gif";
Imgs[2]="01.gif";
という順番に変更したら、リンク先と画像が合うようになりました。。。

ページを読み込むときにHTMLで記述している始めの画像が重複してカウントされているのでしょうか？

説明がうまくできなくてすみません。
もし、何かコメントをいただければ幸いです。
よろしくお願いいたします。