http://hakodate-fc.com/javascript/rollover3.js

1/**
2 * クロスフェードするロールオーバー処理
3 * rollover2.js
4 * Copyright (c) 2007 KAZUMiX
5 * http://d.hatena.ne.jp/KAZUMiX/20071017/rollover2
6 * 
7 * Licensed under the MIT License:
8 * http://www.opensource.org/licenses/mit-license.php
9 * 
10 * 更新履歴
11 * 2009/06/02 ブラウザの「戻る」でフェード状態が残っている場合に対処
12 * 2007/10/17 公開
13 */
14
15(function(){
16   // ページ遷移時に透明にする用
17   var rolloverImages = [];
18   
19   function setRollOver2(){
20     if(!document.images){return;}
21     var imgs = document.images;
22     var insert = [];
23     for(var i=0,len=imgs.length; i<len; i++){
24       var splitname = imgs[i].src.split('_rollout.');
25       if(splitname[1]){
26         var rolloverImg = document.createElement('img');
27         rolloverImages.push(rolloverImg);
28         rolloverImg.src = splitname[0]+'_rollover.'+splitname[1];
29         var alpha = 0;
30         rolloverImg.currentAlpha = alpha;
31         rolloverImg.style.opacity = alpha/100;
32         rolloverImg.style.filter = 'alpha(opacity='+alpha+')';
33         rolloverImg.style.position = 'absolute';
34         rolloverImg.style.width = '100%';
35         
36        
37
38         //ロールオーバー・アウト処理それぞれを設定
39         addEvent(rolloverImg,'mouseover',function(){setFader(this,100);});
40         addEvent(rolloverImg,'mouseout',function(){setFader(this,0);});
41
42         // 後で追加するために追加場所と共に保存しておく
43         // この時点で追加するとdocument.imagesが書き換わって不都合
44         insert[insert.length] = {position:imgs[i],element:rolloverImg};
45       }
46     }
47     // ↑で作ったロールオーバー画像を追加
48     for(i=0,len=insert.length; i<len ;i++){
49       var parent = insert[i].position.parentNode;
50       parent.insertBefore(insert[i].element,insert[i].position);
51     }
52
53     // ページ遷移時にはフェード状態をクリアする
54     addEvent(window,'beforeunload', clearRollover);
55   }
56
57   // 指定要素を指定透明度にするためのフェードアニメを設定する関数
58
59   function setFader(targetObj,targetAlpha){
60     targetObj.targetAlpha = targetAlpha;
61     if(targetObj.currentAlpha==undefined){
62       targetObj.currentAlpha = 100;
63     }
64     if(targetObj.currentAlpha==targetObj.targetAlpha){
65       return;
66     }
67     if(!targetObj.fading){
68       if(!targetObj.fader){
69         targetObj.fader = fader;
70       }
71       targetObj.fading = true;
72       targetObj.fader();
73     }
74   }
75
76   // アルファ値をターゲット値に近づける関数
77   // ターゲット値になったら終了
78
79   function fader(){
80     this.currentAlpha += (this.targetAlpha - this.currentAlpha)*0.2;
81     if(Math.abs(this.currentAlpha-this.targetAlpha)<1){
82       this.currentAlpha = this.targetAlpha;
83       this.fading = false;
84     }
85     var alpha = parseInt(this.currentAlpha);

86     this.style.opacity = alpha/100;
87     this.style.filter = 'alpha(opacity='+alpha+')';
88     if(this.fading){
89       var scope = this;
90       setTimeout(function(){fader.apply(scope)},30);
91     }
92   }
93   
94   // すべてのロールオーバー画像をを透明にする関数（遷移時用）
95
96   function clearRollover(){
97     for(var i=0,len=rolloverImages.length; i<len; i++){
98       var image = rolloverImages[i];
99       image.style.opacity = 0;
100       image.style.filter = 'alpha(opacity=0)';
101     }
102   }
103
104   // イベントを追加する関数
105
106   function addEvent(eventTarget, eventName, func){
107     if(eventTarget.addEventListener){
108       // モダンブラウザ
109       eventTarget.addEventListener(eventName, func, false);
110     }else if(window.attachEvent){
111       // IE
112       eventTarget.attachEvent('on'+eventName, function(){func.apply(eventTarget);});
113     }
114   }
115
116   addEvent(window,'load',setRollOver2);
117
118 })();