Fade.js für den Firefox u. IE

html.de-Forum JavaScript
1

Hallo @ all,

ihr kennt bestimmt die berühmte fade.js. Die einen Fade- Effekt für die Hyperlinks beinhaltet…

hier ein Auszug aus dem JS-Quelltext:

/************* 
**** <config> #000044 #CCCCFF
**/ 
startColor = "#000000"; // MouseOut link color 
endColor = "#e00000"; // MouseOver link color 

stepIn = 20; // delay when fading in 
stepOut = 20; // delay when fading out 

/* 
** set to true or false; true will 
** cause all links to fade automatically 
***/ 
autoFade = true; 
/* 
** set to true or false; true will cause all CSS 
** classes with "fade" in them to fade onmouseover 
***/ 
sloppyClass = true; 
/** 
**** </config> 
**************/ 
/************* 
**** <install> 
** 
** 
**** </install> 
**************/ 

hexa = new makearray(16); 
for(var i = 0; i < 10; i++) 
hexa[i] = i; 
hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; 
hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; 

document.onmouseover = domouseover; 
document.onmouseout = domouseout; 

startColor = dehexize(startColor.toLowerCase()); 
endColor = dehexize(endColor.toLowerCase()); 

var fadeId = new Array();
var timerID = 0; 
var theElement,theTagName,theClassName,theUniqueID

function dehexize(Color){ 
var colorArr = new makearray(3); 
for (i=1; i<7; i++){ 
for (j=0; j<16; j++){ 
if (Color.charAt(i) == hexa[j]){ 
if (i%2 !=0) 
colorArr[Math.floor((i-1)/2)]=eval(j)*16; 
else 
colorArr[Math.floor((i-1)/2)]+=eval(j); 
} 
} 
} 
return colorArr; 
} 

function domouseover() { 
  if(document.getElementById) { 
    clearTimeout(timerID); 
    theElement = event.srcElement; 
    theTagName = theElement.tagName; 
    theClassName = theElement.className; 
    theUniqueID = theElement.uniqueID; 
    if ((theTagName  == "A" && autoFade) || theClassName == "fade" || (sloppyClass && theClassName.indexOf("fade") != -1)) {    
      //alert(theElement); 
      fade(startColor,endColor,theUniqueID,stepIn); 
      timerID = setTimeout('pulsedown()',500); 
    } 
  } 
} 

function pulseup() { 
  if(document.getElementById) { 
    clearTimeout(timerID); 
    if ((theTagName  == "A" && autoFade) || theClassName == "fade" || (sloppyClass && theClassName.indexOf("fade") != -1)) {    
      //alert(theElement);  
      fade(startColor,endColor,theUniqueID,stepIn); 
      timerID = setTimeout('pulsedown(theElement)',500); 
    } 
  } 
} 

function pulsedown(theElement) { 
  if (document.getElementById) { 
    clearTimeout(timerID); 
    if ((theTagName  == "A" && autoFade) || theClassName == "fade" || (sloppyClass && theClassName.indexOf("fade") != -1)) {    
      //alert(theElement); 
      fade(endColor,startColor,theUniqueID,stepOut); 
      timerID = setTimeout('pulseup()',500); 
    } 
  } 
} 


function domouseout() { 
  if (document.getElementById) { 
    clearTimeout(timerID); 
    var srcElement = event.srcElement; 
    if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) 
      fade(endColor,startColor,srcElement.uniqueID,stepOut); 
  } 
} 


function makearray(n) { 
this.length = n; 
for(var i = 1; i <= n; i++) 
this[i] = 0; 
return this; 
} 

function hex(i) { 
if (i < 0) 
return "00"; 
else if (i > 255) 
return "ff"; 
else 
return "" + hexa[Math.floor(i/16)] + hexa[i%16];} 

function setColor(r, g, b, element) { 
var hr = hex(r); var hg = hex(g); var hb = hex(b); 
element.style.color = "#"+hr+hg+hb; 
} 

function fade(s,e, element,step){ 
var sr = s[0]; var sg = s[1]; var sb = s[2]; 
var er = e[0]; var eg = e[1]; var eb = e[2]; 

if (fadeId[0] != null && fade[0] != element){ 
setColor(sr,sg,sb,eval(fadeId[0])); 
var i = 1; 
while(i < fadeId.length){ 
clearTimeout(fadeId[i]); 
i++; 
} 
} 

for(var i = 0; i <= step; i++) { 
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" + 
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ 
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); 
} 
fadeId[0] = element; 
}

Dieser funktioniert leider nur im Internet Explorer… es soll jedoch möglich sein ihn für den FF umzuschreiben… hat jemand eine Idee? Evtl. schon verfügbar? Hab im Google lange gesucht aber nichts gefunden…

Gruß,
GNewmann

2

also leider kenne ich diese fade.js nicht, kannst du mal bitte ein beispiellink posten, damit ich weiß was du damit meinst, und ich dir evtl. einen alternatives script geben kann?

3

Beispiel siehe: http://www.bladeneo.de/java.html

Gruß,
GNewmann

4

Kennt niemand eine Version die auch auf meinem favourit Explorer: Firefox, geht?
Ich weiß, dass da ein Paar Methoden (oder Klassen, keine Ahnung!?) mit dem Firefox nicht gehen, doch es soll Klassen geben, die bei beiden funktionieren. Kann dass niemand von euch umschreiben? (Bin leider mit JavaScript noch nicht so sehr vertraut wie mit anderen Programmiersprachen und damals im Java- Unterricht, hatten wir nicht viel mit Java-Script zu tun :frowning: )

Wäre wirklich nett!

Ich denke jedoch, dass es das bestimmt schon gibt, jedoch finde ich im google leider nirgends ein Script…

Gruß,
GNewmann