JavaScripts > Text > Script-Detail: Aufglühender Link
Aufglühender Link
Dieses Script sorgt dafür, dass Links beim Überfahren langsam aufglühen und beim Verlassen wieder langsam verglühen.Einfarbige Links sind auf Dauer langweilig. Will man seinen Besuchern etwas neues bieten, so läßt man seine Links beim Überfahren aufglühen.
Der Code ist etwas länger, aber nur wenige Zeilen sind anzupassen.
Füge folgenden Code in den
| Code: |
<head>...</head> |
| Code: |
<script language="JavaScript">
<!-- startColor = "#000099"; // initial link color endColor = "#FF0000"; // final link color stepIn = 25; // delay when fading in stepOut = 25; // delay when fading out autoFade = true; 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"; 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 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; } //--> </script> |
Nicht erschrecken, mit dem Kopieren hast du das Schwerste geschafft!
Die wichtigen Stellen sind schon auskommentiert:
Gib in der Zeile
| Code: |
startColor = "#000099"; // initial link color |
In der Zeile
| Code: |
endColor = "#FF0000"; // final link color |
Wieviele Millisekunden zum Aufleuchten beansprucht wird, kannst du unter
| Code: |
stepIn = 25; // delay when fading in |
| Code: |
stepOut = 25; // delay when fading out |
Geschrieben von Phil Marx am 18.06.2004 (7926x gelesen)
weiterempfehlen
Druckversion
kommentieren
Kann man kuerzer schreiben, hat sich wohl bloss noch keiner dran versucht ;)
Geschrieben von Airport1
bei opera funzt des nit wirklich O_o da hat die eigenschaft nen anderen namen ich weiß nur nicht wie die da heißt -.-
Geschrieben von narkaT
also bitte, das funtioniert nur unter Win mit ausgeschaltetem Sicherheitscenter und IE 6. Wer bitte verwendet Windows-Schrott, und wer verwendet IE erst.
Bitte passt eure Tricks nicht dem M$-Standard an, sondern dem W3C!!!
Bitte passt eure Tricks nicht dem M$-Standard an, sondern dem W3C!!!
Geschrieben von sdf