Loading...   Upload Image

Link-EffektTutorials » JavaScript Tutorials » Link-Effekt

Verfasst von DJaneMauzi am 19.05.2009 - wurde schon 6210 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 Färbe ändert?
Dann lest einfach dieses Tutorial, denn hier erkläre 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 gewünscht ist muss var autoFade = true; in var autoFade = false; geändert 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.

 


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 ...


Affiliates:   Blue-Graphics  •   Colorful Gfx  •   Design Grafixx  •   The Seduction  •   Gallery Yuri  •   Chibi Graphics  •   Pat DG  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider