(広告)画像などを一定時間で別の物に差し替える方法です

広告画像(リンク付)を一定の時間で差し替えて表示させる物です。
一つのページに長く滞在するタイプのページに有効ですし、フレーム構成ページでサイトにいる間ずっと同じフレームが表示され続けるページなどにも有効です。 最近はフレームはあまり推奨されませんが。

下位ブラウザ互換方法をやめてDOMを理解出来るブラウザ専用に変更しました。
その代わり他のスクリプト(ライブラリなど)と共存させても干渉や影響が起きにくいように組んであります。
もう少し簡略化や丸める事ができるのですが、汎用性と設定などの事を考えてのコーディングにしています。

サンプル

---

５秒毎に広告が入れ替わります。
広告をクリックすると別ウィンドウでリンク先を開きます。

ソース と 解説

---

■ [ HEAD内に貼り付けるスクリプト 要設定 ]
<script type="text/javascript"> var ADC = { /* ↓設定１ 表示する広告 []内に '画像パス+ファイル名' を カンマで区切って並べる。長い場合 区切りのカンマ, 直後の改行は可能 */ imgs:['画像URL','画像URL','画像URL'] , /* ↓設定２ 画像と同じ順でリンク先を登録。書式は画像と同じ */ anc:['リンクURL', 'リンクURL', 'リンクURL'] , /* ↓設定３ 表示用画像タグのID '' で囲む */ id:'ADimage1' , /* ↓設定４ リンク先を開くウィンドウ 0:このウィンドウ 1:ウィンドウを開く */ win:1 , /* ↓設定５ 広告切替時間 1000 = 1秒 */ sec:5000 , /* ↓設定６ ループ 0:しない 1:する */ loop:1 , /* 設定項目終り */ set:function(O){ if(!document.getElementById && !document.all){ return false; } O.tmp =[]; for(var i=0; i<O.imgs.length; i++){ O.tmp[i] = new Image(); O.tmp[i].src = O.imgs[i]; } O.ido = document.getElementById(O.id) || document.all(O.id); O.add(O.ido,'click', function(){ if(O.win){ window.open(O.anc[O.now],'AD'); }else{ top.location.href = O.anc[O.now]; } } ); O.ido.style.cursor = 'pointer'; if(O.Tid){ clearTimeout(O.Tid); } O.now =-1; var CHG = function(){ if(++O.now >= O.tmp.length || !O.tmp[O.now]){ if(!O.loop){ return false; } O.now = 0; } O.ido.src = O.tmp[O.now].src; O.Tid = setTimeout(CHG, O.sec); };CHG(); },add:function(obj, type, func){ if(obj.addEventListener){ obj.addEventListener(type, func, false); }else{ if(obj.attachEvent) obj.attachEvent('on' + type, func); }},Tid:undefined }; ADC.add(window, 'load', function(){ ADC.set(ADC) }); </script>

■ [ 広告を表示する場所のIMGタグ ]
普通のイメージタグ1個にIDをつけるだけです。 <img id='ADimage1' src="初期画像URL">

---

設定

---

■ [ 使い方 ]
HTML内にIMGタグ
BODY内の広告を表示する場所に普通の画像タグ(必ずIDも)を書き込む。 全てのバナーサイズが同じなら width、heightも付けて置きましょう。 逆に色々なサイズがあるなら、そのサイズに縛られますので付けないようにしましょう。

HEAD内にスクリプトを貼り付けて必要な情報を書き込みます。

設定１ 画像ファイル
表示(バナーチェンジ)させる画像を書式に沿って書き込んでください。
変数代入ではなくオブジェクト型の書式ですので imag:[ ] の括弧の中に、 画像URLを '画像URL' の様にクォートで囲んで各データをカンマで区切ります。 行末に『;』など余計な物をつけないでください。
imgs:['1.jpg','2.jpg','3.jpg']

imgs:['http//・・・・・・・・・・・・・・・/1.jpg',
'http//・・・・・・・・・・・・・・・/2.jpg',
'http//・・・・・・・・・・・・・・・/3.jpg']
画像URLが長い場合などは、この様にカンマの後に改行を入れて見やすく整理。
動作確認して問題が無いようなら1行にしてもよいですし、見やすいままにしておくのも管理しやすいです。
設定２ リンク先URL
表示画像と同じ順番(対応させる為)で、リンク先を登録します。
書式的には設定１と同じです。
anc:['http://www.artemis.ac/', 'http://artemis-cgi.com/', 'http://guestbook.jp/']

anc:['http://www.artemis.ac/',
'http://artemis-cgi.com/',
'http://value-domain.com/']

設定３ ID
画像を表示する場所の画像タグのIDを設定 (この書式で）
id:'ADimage1'

設定４ ウィンドウ
クリックされた時にどのウィンドウで開くか？です。
0:_self , 1:_blank
win:1

設定５ 広告切替時間
1000が1秒です。
あまり差し替え頻度が高いと目立つというよりもうざいだけです。
sec:5000

設定６ ループ
0：ループしない 1:ループする
シンプルな自動スライドとして使えるようにループ無しが用意されています。
loop:1

その他

---

■ウィンドウのオンロードイベント
このスクリプトはwindowのonloadイベントで画像の先読みをしてスタートします。
このウィンドウのオンロードイベントはメソッドでつけてありますので、 メソッドが理解できない下位ブラウザを切り捨てる代わりに、 他のスクリプトで同じイベントが設定されていてもイベントが干渉しあう事がありません。

■グローバル変数
グローバル変数名・関数名と使用してるのは ADC 1個です。
この ADC が他のスクリプトと同じで干渉してしまう場合は、 この配布スクリプトの中の全部のADCという文字列を別の名前に変更するか、 グローバル変数を使わない方法(下記)に変更してください。

■グローバル変数を使用しない方法
次ぎの様に書き加える。

この様に、配布スクリプトの前後の行に追加で書き込みをする事で、 無名関数オブジェクトの実行方法で起動できます。 これならグローバル変数名ADCもローカル変数になり干渉がなくなります。

複数ページで『共通外部ファイル+別設定』で使う場合はこの方法は使えません。

■複数のページで楽に表示させたい。
配布スクリプト(SCRIPTタグを除く)をJSファイルにして外部ファイルとして読み込ませる事で、 どのページでも同じ設定の広告差し替えを簡単に使えてJSファイル1個で設定や変更が済ませられます。
各ページには画像タグとスクリプトの外部ファイル指定は最低限必要です。
<script type="text/javascript" src="JSファイル指定"></script>

画像タグは利用者が自分のページデザインにあわせて何処にでも配置できるように自分でつけてもらう形にしています。

『複数ページ+同一設定』で使う場合はグローバル変数を使わない方のスクリプトを使う方が、 後々の管理も含めトラブルがおきにくいと思います。

■複数のページで共通ファイルを使うが広告や設定は別にしたい。
この場合はグローバル変数を使わない方は無理なので、グローバル変数ADCの干渉にだけ気をつけてください。 配布スクリプトのADCを20文字くらいの、今後干渉する事がありえない文字列に変えておく方がのちのちの予防にもなります。

まず複数のページで楽に使う方法と同じで利用するページに全て読み込ませるようにします。 その上で配布スクリプトより下で、設定項目を上書き設定します。
この様に、設定を変更したい目的の ADCのimgsプロパティ(配列)とancプロパティ(配列)、その他のプロパティなどを 後から書き換えてしまう形で記述します。 これは代入なのでADC.xxx = のような形式で目的の設定名に対して新しい値を代入してください。
これはあくまでも、画像ファイルやリンクURLだけ などの様に一部をページ毎で変更する場合などに使います。 が、共通で使うスクリプト側を一切設定せずに、全ての設定項目をこの様に各ページで上書き設定変更するという方法もあります。 その為にオブジェクトの形で組んでありますので、管理しやすい方で。

■１つのページで複数使いたい。
グローバル変数を使わない方法にするか、増やすごとに配布スクリプトのADCの名前を1つのスクリプトをセットとして変更するようにして、 複数をページに埋め込めば使えます。
外部ソースの場合も別ファイルにしても同じファイル内に複数記述してもOKです。 それぞれ必要な設定をするだけで動きます。 設定3の表示先のIDは必ずそれぞれ変えないと意味がないですよ。

■複数のページで共通にしながら1ページで更に複数・・・
この場合は、グローバル変数を1個使う方法で行います。
複数のページで共通ファイルを使いながら設定は変える方法でまず1個目をつけていしまいます。 その方法で使ったスクリプトのADCの名前を別の名前に全て変更した物を2つ目として 全てのページに読み込ませて、ターゲットの画像タグや設定も別にして書き込みます。

■ページ内の簡易スライドショートして使いたい。
スクリプト内に
O.add(O.id,'click', function()・・・・・
O.id.style.cursor = 'pointer';
と言う行があります。 この2つを削除すればクリックリンク機能がなくなります。

その上で起動を別のイベント起動にしたい場合( windowオブジェクトのイベント以外)は、 安全の為にwindowがロードしてからイベント付加をします。
ADC.add(window, 'load', function(){ ADC.set(ADC) });
を次の例の様に変更して赤い時の部分のオブジェクト(イベント発生エレメント)とイベントタイプ(イベントハンドラーからonを取った物)だけを目的の物に変更してください。

例：document で onclick で始動
ADC.add(window, 'load', function(){ ADC.add(document,'click',function(){ ADC.set(ADC); }); });

例：
IDが btn1 というボタンをクリックしたら始動
ADC.add(window, 'load', function(){ ADC.add(document.getElementById('btn1'),'click',function(){ ADC.set(ADC); }); });

と言った感じで、ウィンドウがロードされたらの条件の中で ADC.addを使ってイベントを追加します。
( ADC.add()はattachEvent() または addEventListener()を実行します ）

---

その他

単純な繰り返し処理ですがsetInterval()を使ってない理由はNetscape、FireFoxの挙動不審の為です。

設定しやすいように設定箇所はわざと行を空けて広く取ってあります。 全ての設定が終わったら、無駄なスペースと改行を全てなくしてもプログラムは動きます。 必要に応じて『 , 』カンマなどがあります。これは削除しないように。
(このページのソース、HEAD部分で実際に配布スクリプトを使っています)

---