サブウィンドウのバナー画像を一定時間ごと入れ替える


■動作ブラウザ　【 IE:5.0　 NN:6.0】
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × × - ○ ○ × × × × ○ - × -
Macintosh × × × ○ - × ○ × × ○ - - ○
UNIX - - - - - × ○ ○ ○ ○ - - -
Dreamcast - - - - - - - - - - × × -

ポイント num++; num %= 4; if ((!subWin.closed) && (subWin.document.banner)) { subWin.document.banner.src = num + ".gif"; subWin.document.getElementById("myLINK").href = jumpURL[num]; } setTimeout("changeImg()",3000);
説　　明 バナー画像はsetTimeout()やsetInterval()で一定時間ごとに入れ替えます。しかし、バナーの場合は画像を入れ替えるだけではジャンプ先まで変更することができないため、何枚目の画像を表示しているかどうかを変数に保存しジャンプ先のURLを、あらかじめ配列内に格納しておきます。
サブウィンドウ上にあるバナー画像を入れ替えるには、あらかじめサブウィンドウを開いておきます。サブウィンドウに対して表示されている画像は「サブウィンドウ名.document.画像名」としてアクセスできるので、一定時間後とバナー画像を入れ替えます。クリックされた時にジャンプするページURLは「サブウィンドウ名.document.getElementById(AタグID名).href」でアクセスできます。AタグID名は<a href="xxx.html" id="myLINK">のように記述しid=で指定した名前を使います。
サブウィンドウは常に開かれているわけではありませんし、クリックして他ページに移動した場合、書き換えるバナー画像やリンクが消滅してしまいます。これによるエラーを防ぐために、サブウィンドウが存在しているか、書き換えるべきバナー画像が存在しているかを「if ((!subWin.closed) && (subWin.document.banner))」の行でチェックしています。
サンプル <html> <head> <title>サブウィンドウのバナー画像を一定時間ごと入れ替える</title> <script language="JavaScript"><!-- subWin = window.open("sub.html","swin","width=320,height=240"); num = 0; jumpURL = new Array(); jumpURL[0] = "http://www.shiojiri.ne.jp/~openspc/"; jumpURL[1] = "http://game.gr.jp/"; jumpURL[2] = "http://www.yahoo.co.jp/"; jumpURL[3] = "http://www.infoseek.co.jp/"; function changeImg() { num++; num %= 4; if ((!subWin.closed) && (subWin.document.banner)) { subWin.document.banner.src = num + ".gif"; subWin.document.getElementById("myLINK").href = jumpURL[num]; } setTimeout("changeImg()",3000); } // --></script> </head> <body onLoad="setTimeout('changeImg()',1000)"> サブウィンドウのバナー画像を一定時間ごと入れ替えます。 </body> </html>
補足説明 Safari 1.0、iCabでも動作します。サブウィンドウ側のHTMLソースは以下の通りです。 <html> <head> <title>サブウィンドウのバナー画像を一定時間ごと入れ替える</title> </head> <body> サブウィンドウ<br> <br> <a href="http://www.shiojiri.ne.jp/~openspc/" id="myLINK"><img src="0.gif" name="banner"></a> </body> </html>

■サンプルスクリプトを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!
写真素材 PIXTA