Loading...   Upload Image

Link-EffektTutorials » JavaScript Tutorials » Link-Effekt

Verfasst von DJaneMauzi am 19.05.2009 - wurde schon 8096 mal gelesen

Kategorie: JavaScript
Bewertung:
9x bewertet
Schwierigkeit: einfach
Kommentare: [ 2 ]

Tag - Schlagwort Javascript Tag - Schlagwort Link Tag - Schlagwort Effekt

Link-Effekt - Tutorial

Hey ihr wolltet schon immer mal ein Link haben, welcher langsam die Frbe ndert?
Dann lest einfach dieses Tutorial, denn hier erklre ich euch wie man So ein Link erstellt =D

Beispiel anschauen

Folgenden Code speichert ihr einfach als fade.js ab und vergesst nicht eure Farben anzupassen xD
var startColor = "#9778BB"; // !!!!!!!!!! Linkfarbe anhpassen !!!!!!!!!!
var endColor = "#93BBB8"; // !!!!!!!!!! Endfarbe anpassen!!!!!!!!!!
var stepIn = 20; // Delay Fade In 
var stepOut = 10; // Delay Fade Out 
var autoFade = true; // alle Links automatisch faden 

var sloppyClass = false; 

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";

var version = parseInt(navigator.appVersion)
var appName = navigator.appName
var ns4 = version>=4 && appName=="Netscape"

if (ns4) { 
	document.onmouseover = doN4mouseover;
	document.onmouseout = doN4mouseout;
} else {  
	document.onmouseover= domouseover;
	document.onmouseout= domouseout;
}

startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.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 == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
			fade(startColor,endColor,srcElement.uniqueID,stepIn);
	}
}

function domouseout() {
	if (document.all){
		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 doN4mouseover(event) {
	var srcElement=event.target;
	if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
		nfade(startColor,endColor,srcElement,stepIn);
}

function doN4mouseout(event) {
		var srcElement = event.target; 
		if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
		 nfade(endColor,startColor,srcElement,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;  
}
function nfade(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,
					i*step,
					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
					);
	}
	fadeId[0] = element;  
}


Voreingestellt ist, dass alle Links der Seite automatisch den Link-Effekt aufweisen,
wenn das NICHT gewnscht ist muss var autoFade = true; in var autoFade = false; gendert werden!

Ausserdem muss dann den Links, welche diesen Link-Effekt aufweisen sollen die Klasse fade zugewiesen werden.

Das Link sollte dann so aussehen, Beispiel:
<a href="http://alice-grafixx.de" class="fade">Alice-Grafixx.de ...</a>


Damit das Script auch eingesetzt werden kann, muss nach folgender Code noch in den Head-Bereich, also irgendwo zwischen <head> und </head>, eurer Seite gepackt werden.

<script type="text/javascript" src="fade.js"></script> 


Sofern sich die Datei jade.js nicht im selben Ordner befinden solltem muss die Pfadangabe ggf. angepasst werden ;)

Hinweis: Dieses Tutorial wurde am 09.04.2012 ueberarbeitet...

Kommentar schreibenHinterlasse einen Kommentar

Du musst angemeldet sein, um einen Kommentar zu hinterlassen...

Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...


       ALL-INKL.COM - Webhosting Server Hosting Domain Provider