https://www.kokonoe-shop.com/js/smart-crossfade.js

1// JavaScript Document<script>
2function smartRollover() {
3    if(document.getElementsByTagName) {
4        var images = document.getElementsByTagName("img");
5 
6        for(var i=0; i < images.length; i++) {
7            if(images[i].getAttribute("src").match("_off."))
8            {
9                images[i].onmouseover = function() {
10                    this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
11                }
12                images[i].onmouseout = function() {
13                    this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
14                }
15            }
16        }
17    }
18}
19 
20if(window.addEventListener) {
21    window.addEventListener("load", smartRollover, false);
22}
23else if(window.attachEvent) {
24    window.attachEvent("onload", smartRollover);
25}
26 
27 
28// cross fade
29 
30new function(){
31  function setRollOver2(){
32    if(!document.images){return;}
33    var imgs = document.images;
34    var insert = [];
35    for(var i=0;i<imgs.length;i++){
36      var splitname = imgs[i].src.split('_off.');
37      if((splitname[1])&&(imgs[i].parentNode.tagName=='A')){
38        var rolloverImg = document.createElement('img');
39        rolloverImg.src = splitname[0]+'_on.'+splitname[1];
40        var alpha = 0;
41        rolloverImg.currentAlpha = alpha;

42        rolloverImg.style.opacity = alpha/100;
43        rolloverImg.style.filter = 'alpha(opacity='+alpha+')';
44        rolloverImg.style.position = 'absolute';
45 
46 
47        addEvent(rolloverImg,'mouseover',function(){setFader(this,100);});
48        addEvent(rolloverImg,'mouseout',function(){setFader(this,0);});
49 
50        insert[insert.length] = {position:imgs[i],element:rolloverImg};
51      }
52    }
53    for(var i=0;i<insert.length;i++){
54      var parent = insert[i].position.parentNode;
55      parent.insertBefore(insert[i].element,insert[i].position);
56    }
57  }
58 
59 
60  function setFader(targetObj,targetAlpha){
61    targetObj.targetAlpha = targetAlpha;
62    if(targetObj.currentAlpha==undefined){
63      targetObj.currentAlpha = 100;
64    }
65    if(targetObj.currentAlpha==targetObj.targetAlpha){
66      return;
67    }
68    if(!targetObj.fading){
69      if(!targetObj.fader){
70        targetObj.fader = fader;
71      }
72      targetObj.fading = true;
73      targetObj.fader();
74    }
75  }
76 
77  function fader(){
78    this.currentAlpha += (this.targetAlpha - this.currentAlpha)*0.2;
79    if(Math.abs(this.currentAlpha-this.targetAlpha)<1){
80      this.currentAlpha = this.targetAlpha;
81      this.fading = false;
82    }
83    var alpha = parseInt(this.currentAlpha);

84    this.style.opacity = alpha/100;
85    this.style.filter = 'alpha(opacity='+alpha+')';
86    if(this.fading){
87      var scope = this;
88      setTimeout(function(){fader.apply(scope)},30);
89    }
90  }
91 
92  function addEvent(eventTarget, eventName, func){
93    if(eventTarget.addEventListener){
94      eventTarget.addEventListener(eventName, func, false);
95    }else if(window.attachEvent){
96      // IE
97      eventTarget.attachEvent('on'+eventName, function(){func.apply(eventTarget);});
98    }
99  }
100 
101  addEvent(window,'load',setRollOver2);
102 
103}