JAVASCRIPT   26

smart-crossfade.js

Guest on 19th July 2021 04:52:04 PM

  1. function smartRollover() {
  2.         if(document.getElementsByTagName) {
  3.                 var images = document.getElementsByTagName("img");
  4.  
  5.                 for(var i=0; i < images.length; i++) {
  6.                         if(images[i].getAttribute("src").match("_off."))
  7.                         {
  8.                                 images[i].onmouseover = function() {
  9.                                         this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
  10.                                 }
  11.                                 images[i].onmouseout = function() {
  12.                                         this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
  13.                                 }
  14.                         }
  15.                 }
  16.         }
  17. }
  18.  
  19. if(window.addEventListener) {
  20.         window.addEventListener("load", smartRollover, false);
  21. }
  22. else if(window.attachEvent) {
  23.         window.attachEvent("onload", smartRollover);
  24. }
  25.  
  26.  
  27. // cross fade
  28.  
  29. new function(){
  30.   function setRollOver2(){
  31.     if(!document.images){return;}
  32.     var imgs = document.images;
  33.     var insert = [];
  34.     for(var i=0;i<imgs.length;i++){
  35.       var splitname = imgs[i].src.split('_off.');
  36.       if((splitname[1])&&(imgs[i].parentNode.tagName=='A')){
  37.         var rolloverImg = document.createElement('img');
  38.         rolloverImg.src = splitname[0]+'_on.'+splitname[1];
  39.         var alpha = 0;
  40.         rolloverImg.currentAlpha = alpha;
  41.         rolloverImg.style.opacity = alpha/100;
  42.         rolloverImg.style.filter = 'alpha(opacity='+alpha+')';
  43.         rolloverImg.style.position = 'absolute';
  44.  
  45.  
  46.         addEvent(rolloverImg,'mouseover',function(){setFader(this,100);});
  47.         addEvent(rolloverImg,'mouseout',function(){setFader(this,0);});
  48.  
  49.         insert[insert.length] = {position:imgs[i],element:rolloverImg};
  50.       }
  51.     }
  52.     for(var i=0;i<insert.length;i++){
  53.       var parent = insert[i].position.parentNode;
  54.       parent.insertBefore(insert[i].element,insert[i].position);
  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.   function fader(){
  77.     this.currentAlpha += (this.targetAlpha - this.currentAlpha)*0.2;
  78.     if(Math.abs(this.currentAlpha-this.targetAlpha)<1){
  79.       this.currentAlpha = this.targetAlpha;
  80.       this.fading = false;
  81.     }
  82.     var alpha = parseInt(this.currentAlpha);
  83.     this.style.opacity = alpha/100;
  84.     this.style.filter = 'alpha(opacity='+alpha+')';
  85.     if(this.fading){
  86.       var scope = this;
  87.       setTimeout(function(){fader.apply(scope)},50);
  88.     }
  89.   }
  90.  
  91.   function addEvent(eventTarget, eventName, func){
  92.     if(eventTarget.addEventListener){
  93.       eventTarget.addEventListener(eventName, func, false);
  94.     }else if(window.attachEvent){
  95.       // IE
  96.       eventTarget.attachEvent('on'+eventName, function(){func.apply(eventTarget);});
  97.     }
  98.   }
  99.  
  100.   addEvent(window,'load',setRollOver2);
  101.  
  102. }

Raw Paste


Login or Register to edit or fork this paste. It's free.