[JavaScript] Fading Links

[the0bone]

Seit einigen Tagen wurde immer wieder nach dem Script für fading Links gefragt. Hier ist eines!

Diese Datei als "fade.js" speichern

if (document.all) {
document.onmouseover = domouseover;
document.onmouseout = domouseout;
}

function domouseover() {
  if(document.all){
  srcElement = window.event.srcElement;
  if (srcElement.className.indexOf("fade") > -1) {
        var linkName = srcElement.name;
      fadein(linkName);
      }
      }
}

function domouseout() {
  if (document.all){
  srcElement = window.event.srcElement;
  if (srcElement.className.indexOf("fade") > -1) {
        var linkName = srcElement.name;
      fadeout(linkName);
      }
      }
}

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

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

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 setbgColor(r, g, b, element) {
      var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = "#"+hr+hg+hb;
}

function fade(sr, sg, sb, er, eg, eb, step, direction, element){
    for(var i = 0; i <= step; i++) {
setTimeout("setbgColor(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);
    }
}


function fadeout(element) {

/*-----------------=[fadeout]=----------------------
||Blendet einen Link von einer zur anderen Farbe,  ||
||wenn sich die Mause vom Link wegbewegt.          ||
||-------------------------------------------------||
||Beispiel:                                        ||
||                                                 ||
||fade(255,150,0, 255,255,255, 30, 1, element);    ||
||      |   |  |   |   |   |    |                  ||
||     Startfarbe  |   |   |    |                  ||
||                 |   |   |    |                  ||
||                 Stopfarbe    |                  ||
||                              |                  ||
||                         Verzögerung             ||
||                      kleiner=schneller          ||
||                                                 ||
||                                                 ||
||Alle Farbangaben in RGB.                         ||
||                                                 ||
||Die letzten beiden Einheiten sollten nicht       ||
||veraendert werden!                               ||
||                                                 ||
||Zum aktivieren die "//" löschen!                 ||
---------------------------------------------------*/

    //fade(255,150,0, 255,255,255, 30, 1, element);
}


function fadein(element) {

/*-----------------=[fadeout]=----------------------
||Blendet einen Link von einer zur anderen Farbe,  ||
||wenn sich die Mause über Link bewegt.            ||
||-------------------------------------------------||
||Beispiel:                                        ||
||                                                 ||
||fade(255,150,0, 255,255,255, 30, 1, element);    ||
||      |   |  |   |   |   |    |                  ||
||     Startfarbe  |   |   |    |                  ||
||                 |   |   |    |                  ||
||                 Stopfarbe    |                  ||
||                              |                  ||
||                         Verzögerung             ||
||                      kleiner=schneller          ||
||                                                 ||
||                                                 ||
||Alle Farbangaben in RGB.                         ||
||                                                 ||
||Die letzten beiden Einheiten sollten nicht       ||
||veraendert werden!                               ||
||                                                 ||
||Zum aktivieren die "//" löschen!                 ||
---------------------------------------------------*/

        fade(255,255,255, 273,132,73, 15, 1, element);
}

Zum Einbinden in eine HTML File einfach dieses in den HEAD setzten und die Datei im gleichen Verzeichnis speichern wie die fade.js .

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

Links werden über class an das Script gebunden:

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

[Toxical]

hm jo kenn ich
aber ich bentz lieber das "original" wenn man so sagen darf, hast du dasselber geschrieen oder is das script, was mal einer ich glaub holunder wars, auf einer seite entdeckt hat ... sieht so aus
#
aber trotzdem nett das ses hier auftaucht

[the0bone]

Ist das Script!
Der Copyright steht in der Downloaddatei!

Nur haben einige das Script dort nicht gefunden oder konnten es nicht umscheiben!
Hier ist es in Deutsch mit Beschreibung!!!

[Toxical]

aso, na dann alles supi, hätte dir auch nichts anderes zugetraut

[the0bone]

Ich hab da jetzt noch was geiles gefunden!

http://javascript.internet.com/navig...over-menu.html

[Toxical]

wow wirklich edel, gefällt mir gut, wer dich gleich mal ntzen bei meim nächsten menue^^

[holunda]

is das script, was mal einer ich glaub holunder wars, auf einer seite entdeckt hat

holundER? Ich darf doch sehr bitten *räusper*

[Toxical]

ups sorry war wohl wieder der finger krebs am werk^^

[Toxical]

also mir gefällt da script gar nicht von der art wie es geschroieben ist, oder wie man es anpassen kann.... nicht sehr userfreundlich geschrieben

auusredem basiert es auf transparenz man kann alos keine eigenen farben defibnieren es schimmetrt immer die hintergrund frabe durch

man kann aber auch das link fade script auf tabellen anwenden ...

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

einfach so ändern...

dann eben
<td class="fade">

und es geht schon

[Blade_de]

wenn ich das script von oben benutze muss ich habe jeden link bei mir auf der HP anpassen. Gibt eine Möglichkeit das direkt für alle Links zubestimmen ?

[Toxical]

Geht in dem du das englische original verwendest, und
autofade = true;
setzt

Hier das original Script ich hoffe Copyright steht mit drin
nach dem Download einfach umbenennen zu fade.js ...

[danis`]

Die datei (original) is beschädigt!
Sagt auf jedenfall Winrar!
Ich möchte gerne bei meiner clanpage ein fade von weiß zu #003366 haben! Aber irgendwie geht das nicht!
Ich habe extra alle schriftformationen rausgenommen und so aber es geht trotzdem nicht!
könnt ihr mir helfen?

[danis`]

Oh gerade gelsen das man es umbenennen muss ^^
*gg* UUUPS

[danis`]

geil es geht!!
danke danke danke!!

[CrazyVampy]

kann mir da oben den ersten Beitrag mal jemand genauer erläutern? bei mir funzt da garnicht ;\