Sie sind hier: jswelt.de // JavaScripts // Animationen // Fading Links

Fading Links  (Quelltext anzeigen) Browser   ScriptDemo   Anstatt des 2. JavaScript-Teils können Sie auch eigene Links untereinander schreiben. Sie müssen lediglich beim Attribut "name" die Variable LinkX jeweils um 1 erhöhen.  Letzte Bearbeitung am 09. May 2001   Als registriertes Mitglied könnten Sie sich dieses Script an Ihre eMail-Adresse mailen lassen! Melden Sie sich jetzt an, kostenlos! << Fading Image Rechtsklick Bilder / Link >>     Kommentare zu diesem Script am 24. 04. 2003 um 20:09:29 schrieb [javascript protected email address]: Das Script gibts viiiiiiel einfacher auf peachie.nu! da wird alles super erklärt und man kann die farben auch ändern. :) am 23. 04. 2003 um 09:01:50 schrieb [javascript protected email address]: Ja toll mein link sollte eigentlich von weiss zu schwarz die farbe wechseln .. jedoch leuchtet er kurz auf und wechselt dann die Farbe zu Blau obwohl ich sie gar nicht definiert habe..... am 21. 04. 2003 um 11:47:06 schrieb [javascript protected email address]: Hi jswelt.de Mensch stellt euch doch nicht so an mit diesen Script ;-) Ich erkläre es kurz. Also ich denke wir fangen bei den ersten Problem an. Wie binde ich es in meine Homepage ein? Nun du nimmst den ganz großen Script Schnipsel als erstes. Das ist der: <script language="JavaScript" type="text/javascript"> <!-- 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) { fade(255,255,255, 0,0,0, 25, 1, element); } function fadein(element) { fade(0,0,0, 255,255,255, 12, 1, element); } function fadeIn2(id){ fade(255,255,255, 88,118,152, 25, 1, id); } function fadeOut2(id){ fade(88,118,152, 255,255,255, 29, 1, id); } //--> </script> Diesen bindest du über unter deinen </head> Bereich ein. So findest du ihn am schnellsten. Ausserdem muss er da stehen, denn wenn er ganz unten auf deiner Seite stehen würde, wüssten die Links nicht was sie machen sollten da sie keine Befhle erhalten haben (diese sind ja ganz unten) und da der PC von oben nach unten ein Dokument durch geht funktioniert es nur wenn dieser 1. Teil ganz oben ist dierekt unter </head>. Nun nehmen wir den Zweiten Codeschnipsel: </script> <script language="JavaScript" type="text/javascript"> <!-- for (i = 0; i < 20; i++) { document.write('<a href="#" class="fade" name="link'+i+'">Beispiellink '+i+' mit langem Text</a><br>'); } //--> </script> Diesen Baut ihr !genau dort ein! wo euer Link stehen soll. Nun können wir ihn aber nicht so benutzen, denn er zeigt uns so 20 Links an. Dazu schauen wir uns diesen Codeschnipsel (Cs) im 2.Teil Codeteil an den ich gepostet habe: for (i = 0; i < 20; i++) Hier weist er die ID zu und die reproduzierende Menge. i=id i= 0 das heist dieser Link hat die Nummer 0. Die reproduziernde Menge wird so definiert: i< 20; i++ Nun geben wir also an: for (i = 0; i < 1; i++) Das heist nun in Fachdeutsch ausgedrückt ;-): i ist 0. Zähle solange weiter bis der gewünschte wert 1 erreicht ist. Kapiert? Das heist das diese Funktion i < 1; i++ solange hoch zählt bist hier in diesen Beispiel die 1 erreicht ist und das heist das der Link einmal reprodzuiert wird. Nun müssen wir noch den Link den geünschten Namen geben: <a href="#" class="fade" name="link'+i+'">Beispiellink '+i+' mit langem Text</a> Das ist fast eine rein HTML Index. Aber nur fast ;-). Ihr seht doch bei Beispiellink in meinem beispiel dahinter so ein '+i+' ?! Macht das Weg, denn sonst zeigt er euch die ID bei jeden Link an und das ist nicht schön. Also löscht das komplette ! '+i+' !, also auch diese Füssel da links und rechts ;-) Nun ändert den Namen wie ihr ihn haben wollt. Das müsst jeder können der Webmaster ist. Ausserdem müsst ihr bei den href also der zu linkenden Seite das # weg löschen und den Pfad das zu verlinkende Dokument angeben. So nun mal probieren ob es geht und startet mal das HTML oder PHP Dokument. Wenn wir nun einen weiteren Link anlegen wollen gehen wir wieder in den gewünschten Bereich wo er sein soll und fügen wieder diesen Cs ein: <!-- for (i = 0; i < 20; i++) { document.write('<a href="#" class="fade" name="link'+i+'">Beispiellink '+i+' mit langem Text</a><br>'); } //--> </script> So jetzt müssen wir der ID einen höheren Wert zuordnen Wir hatten vorher i den Wert 0 zugeordnet und nun geben wir ihn 1 Dem zufolge müssen wir auch der reproduzierfunktion einen Wert höher geben sonst frisst er sich selber ^^ Der folgende Code heist dann: <!-- for (i = 1; i < 2; i++) { document.write('<a href="#" class="fade" name="link'+i+'">Startseite</a><br>'); } //--> </script> Wollt ihr nun ein Link in einer Tabelle haben dann sähe das so aus: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><script language="JavaScript" type="text/javascript"> <!-- for (i = 0; i < 20; i++) { document.write('<a href="#" class="fade" name="link'+i+'">Beispiellink '+i+' mit langem Text</a><br>'); } //--> </script> </td> </tr> </table> Also zwischen den <td> kommt das dann hin. So nun zur Farbe ändern. Ist eigentlich auch ganz einfach. Kleines "Intro". Der Computer arbeitet Binär aber er stellt die Befehle im Maschninencode dezimal dar. Darunter auch die Farben. Deswegen brauchen wir nun die Dezimal Farben. Ein Standertmäßiges Programmiersystem wie javascript verfügt über 32bit das heist wir können 3 mal 256 Farben also 16.7 Millionen Farben mit diesen Programmiersprache darstellen. Um zu sehen welche Farbe man gerade hat, bzw. welchen Dezimalwert diese Farbe besitzt, machen wir was ganez einaches: Wir gehen in Paint und klciken mit einen Dobbelklick auf irgend eine Farbenteil den man unten in Paint sieht (blau, grün etc) Nun erscheint ein Diealogfesnter wo wir auf Farbe definieren klicken. Nun erscheint ein Farbenspektrum was 16,7 millionen Farben umfasst. Sagen wir du hast weiß als Farbe dann siehst du nun im Dialogfeld unten rechts die Dezimal zahlen. Das sind 6 Textbereiche wo du zahlen siehst. Die die ganez rechts stehen also das sind 3 übereinander damit definierst du exakt deine Farbe. trage nun irgend eine zahel oder Zhalen von 0 - 255 in die 3 rechten Kästchen ein und du siehst sie verändern sich. Cool nicht? ;-) Die 3 übereinander geordneteten Kästchen die du links findest dienen zu helligkeit Sättigung und Farbitensität. Cool oder? ;-) HAHA nun haben wir die übermacht gegen den Code den wir hier haben. Wir können nun den Script !zwingen! unsere Farben darzustellen wie wir es wollen. Nja ok ich hör ja schon auf mit posen. Also nun öffnen wir nochmal den ersten script bzw. lesen den ersten script nochmal. Das war der ganz lange von den beiden die ich hier erkläre. So und da suche wir mal diese Zeilen heraus: function fadeout(element) { fade(255,255,255, 0,0,0, 25, 1, element); } function fadein(element) { fade(0,0,0, 255,255,255, 12, 1, element); } function fadeIn2(id){ fade(255,255,255, 88,118,152, 25, 1, id); } function fadeOut2(id){ fade(88,118,152, 255,255,255, 29, 1, id); } Das sind die Fade funktionen. Die Farben wechseln exakt 4 mal die Farbe bis zum Ende des Hover Effekts. harharharhar Schauen wir uns nun die erste function an und zwar den fade effekt fade(255,255,255, 0,0,0, 25, 1, element); Die Zahlen kommen uns bekannt vor oder? Wenn nicht dann überlegt an das Beipsiel mit Paint. Hier sind nur 6 Zahlen von relavanter Bedeutung: Die ersten 6 (weil wir ja auch nur 6 Textfelder in Paint hatten). Also wäre das 255 255 255 0 0 0 Also ich habe sie exakt von der ersten function genommen. Ihr könnt sie so ablesen im Script ;-) Die ersten 3 Zahlen waren bei Paint die ganz rechts übereinander geordneten Zahlenbereiche. Cool nicht? :-) Hiermit können wir exakt die Farbe bestimmen. Mit den anderen 3 zahlen die Idensitidät und helligkeit und Sättigung. Wenn ihr nun die 4 Functionen von oben nach unten verändert und eure zahlenwerte einsetzt, dann bekommt ihr einen Effekt raus. Aber nicht denken ihr jetzt von rot zu grün dann zu blau faden könnt. Dazu habt ihr zu wenig functionen für das fading. Also bleibt im reelen Bereich des möglichen. So ich hoffe ich konnte helfen. Wenn noch Fragen sind krypthonas@aol.com mfG Sebastian am 2. 04. 2003 um 13:58:18 schrieb [javascript protected email address]: Im Prinzip keine schlechte Sache. Leider ist das Script mittlerweile veraltet, da es nur für den IE ausgelegt ist und nicht im Mozilla/Netscape 6.x oder Opera lauffähig ist. Die Handhabung ist wohl auch nicht so toll, da es hier ja schon mehrere Anfragen gab, wie man was einzustellen hat. Mal sehen, ob es hier auf der Seite was besseres gibt... MfG RaKi am 12. 02. 2003 um 18:30:43 schrieb [javascript protected email address]: ja rigo, wenn man zu blöd ist.... am 11. 02. 2003 um 09:29:17 schrieb [javascript protected email address]: Mh, das Script ist echt nicht schlecht. Vor allem schön strukturiert geschrieben. aber jetzt mal ne andere Frage: Hat jemand eine Idee wie ich das Ding so ummodeln kann, dass ich die hintergrundfarbe einer Ebene (<div>) faden lassen kann? am 30. 01. 2003 um 21:03:29 schrieb [javascript protected email address]: Der script funtz kein bisschen am 28. 10. 2002 um 16:12:11 schrieb [javascript protected email address]: Also, es ist gnaz einfach, die Geschwindigkeit zu ändern: function fadeout(element) { fade(184,139,162, 255,255,255, 25, 1, element); } function fadein(element) { fade(255,255,255, 184,139,162, 12, 1, element); Die Zahlenwerte fast am Schluss, beim fadeout die "25" und beim fadein die "12" bestimmen die Geschiwndigkeit in - denke ich - Millisekunden. Je höher die Zahl, desto langsamer wechselt die Frabe. Die beim fadeout ist dafür, wie schnell der Link wieder die erste Farbe annimmt, wenn der Mauszeiger weggeht, und beim fadein dafür, wie schnell sich die GEschiwndigkeit beim mouseover ändert... Hoffe, ich konnte helfen. MfG BlackPearl am 11. 09. 2002 um 14:35:56 schrieb [javascript protected email address]: Mal ausnahmsweise ein Cooles Script!!!!!!!!! am 2. 08. 2002 um 18:14:01 schrieb [javascript protected email address]: wie lässt sich die geschwindigkeit ändern mit der die farbänderung durchgeführt wird ? Zeige Kommentare 1 - 10 von 28 insgesamt << | 1 Warning: Undefined variable $PHP_SELF in /var/www/vhosts/jswelt.de/httpdocs/inc/comment_blaettern.php on line 48 2 Warning: Undefined variable $PHP_SELF in /var/www/vhosts/jswelt.de/httpdocs/inc/comment_blaettern.php on line 48 3 Warning: Undefined variable $PHP_SELF in /var/www/vhosts/jswelt.de/httpdocs/inc/comment_blaettern.php on line 62 >| >> Kommentar-Seite 1 von 3