Linkfarbe ein- und ausfaden

[Scorp]

Tach,
ich bin schon seit ewigen Zeiten am googlen, find aber einfach keine Hilfe.
Ich Suche nach nem guten Tutorial um Links beim Hovern die Farbe langsam zu ändern (Beispiel)

Ich hoffe Ihr könnt mir helfen.

Vielen Dank!

 

[Fabian H]

Wohl nicht gscheit gegooglet:

http://www.drweb.de/trickkiste/tricks170.shtml


//Edit: Angesehen davon, dass das Beispiel auf deiner (...) Clanseite IE only ist, weil es Filter benutzt => schlecht

 

[bendis]

Hi,

ich habe hier auch noch ein fade-script; einfach den code als "fade.js" speichern (siehe auch Anleitung).

Funktioniert aber nicht mit Mozilla und Netscape Communicator!

MfG
Bendis

/*****************************************\
||       Fade Script Version 3.1         ||
||   http://anarchos.xs.mw/fade.phtml    ||
||            (c) July 2001              ||
|| _____________________________________ ||
|| Created by:                           ||
|| Anarchos    > anarchos.xs.mw          ||
|| _____________________________________ ||
|| auto-startColor by Mike West          ||
|| mike@westman.org                      ||
|| _____________________________________ ||
|| uniqueID upgrade by DubMatrix         ||
|| http://www.princefari.com             ||
|| _____________________________________ ||
|| Color conversion from decimal to      ||
|| hex (dehexize function) by:           ||
|| Litejet > litejet@hotmail.com         ||
|| _____________________________________ ||
|| Fade, hex, setColor functions by:     ||
|| Dak Phoenix > phoenix-archetypes.com  ||
|| _____________________________________ ||
|| domouseover/out based on scripts by   ||
|| The Shadow  > www.icon.co.za/~andrewk ||
||                                       ||
\*****************************************/

/*************
**** <config>
**/

fadeColor = "#7A9EC5";  // color to fade to
//fadeColor = "#0";
stepIn = 17; // delay when fading in
stepOut = 25; // delay when fading out

/* set to true or false; true will
** cause all links to fade automatically
** (you won't need to add class="fade")
***/
autoFade = false;  

/* set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = true;

/* set to true or false; true will make the script
** work for Macs (IE 5+), but you will have to give
** a name (name="blah") to each link that you want
** to fade.
***/
macCompat = false;

/** 
**** </config>
**************/

/*************
**** <install>
**

Now, once you have customized your fading colors,
you need to include your customized .js file on
every page that you want to use it in. You can
include javascript files using this syntax (in
the head of a document):

<script src="fade.js" language="Javascript"></script>

Now that you have the file included, you need to
setup your links a small bit.  Each link that you
want to fade needs to use the fade class.

Example:

<a href="blah.html" class="fade">click here</a>

Also, the link must be plain text.  This means
that you can't have <b>'s, <i>'s, <font>'s, etc.
inside of the link.

Example of what not to do:

<a href="blah.html" class="fade"><b>click</b> here</a>

Have fun!
-Anarchos-

** 
**** </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;

fadeColor = dehexize(fadeColor.toLowerCase());

var fadeId = new Array();

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.all){
		var srcElement = event.srcElement;
		if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
				if (!srcElement.startColor) {
					srcElement.startColor = (srcElement.style.color)? srcElement.style.color: srcElement.currentStyle.color;
					srcElement.startColor = dehexize(srcElement.startColor.toLowerCase());
				}
				var link = (macCompat? srcElement.name: srcElement.uniqueID);
				if (link) fade(srcElement.startColor,fadeColor,link,stepIn);				
				else if (macCompat) alert("Error: Mac Compatility mode enabled, but link has no name.");
		}
	}
}

function domouseout() {
	if (document.all){
		var srcElement = event.srcElement;
		if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
			var link = (macCompat? srcElement.name: srcElement.uniqueID);
			if (link) fade(fadeColor,srcElement.startColor,link,stepIn);
		}
	}
}

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 && eval(fadeId[0])) {
		var orig = eval(fadeId[0]);
		setColor(orig.startColor[0],orig.startColor[1],orig.startColor[2],orig);
		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;
}

 

[HuriX]

wenn mir nun noch verraten kannst wie ich mehrere verschiedene fade styles auf eine datei krieg bin ich glücklich

 

[bendis]

Also, dein Fade-Script heißt "fade.js"

Dein Link heißt

<a href="blah.html" class="fade">click here</a>

"class" besagt, das hier also dein fade.js greift.

Speichere dein Fade-Script neu und nenn es z.B fade2.js. Ändere da dann die Farbe.

Wenn du jetzt einen zweiten Link hast, nennst du die class da fade2

Beispiel:

<a href="blah2.html" class="fade2">click here</a>

So müßte es klappen, vielleicht gehts auch einfacher und jemand hat 'ne Anregung

MfG,
Bendis