https://www.wanosato.com/common/js/rollover.js

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

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