<klick>Nachrichten zu JavaScript und Programmierung</danke>
jswelt.de |  forum |  pixelboutique |  User Online (max. 20)  
javascript archiv jswelt javascript archiv jswelt  
 
 LogIn // Neu
 
     

menu
 Home
 JavaScripts
 Photoshop
 Internetrecht
 Impressum
 Gästebuch
 Kontakt
 Service
 Flashgames
 Hompage-Shop
 Statistiken
 IRC-Channel
 hier werben
 Literatur
 Mediadaten
 Impressum
interessantes
suche


Suchen
forum

Zum Forum

statistiken
481JavaScripts in
23Kategorien
36PS-Tuts
45124reg. User
68632  Mails versendet
Statistiken
5865Tage online

javascripts

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!

Empfohlene Fachliteratur:
01  JavaScript lernen . Anfangen, anwenden, verstehen
JavaScript ist die populärste Scriptsprache im Internet. Dieses Buch bietet Ihnen einen leichten Einstieg in die Syntax und Sprachelemente. Anhand von Frames, Fenstern und Browserinformationen ...   [weiterlesen]

JavaScript lernen . Anfangen, anwenden, verstehen

 
02  JavaScript für Fortgeschrittene, m. CD-ROM
JavaScript ist eine sehr mächtige und dabei klar verständliche Skriptsprache, die in allen wichtigen Browsern lauffähig ist. Durch seine echte Unabhängigkeit von Betriebssystemen ...   [weiterlesen]

JavaScript für Fortgeschrittene, m. CD-ROM


<< Fading Image Rechtsklick Bilder / Link >>

 

 

Kommentare zu diesem Script
am 24. 04. 2003 um 22:09:29 schrieb vicky:
    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 11:01:50 schrieb User:
    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 13:47:06 schrieb Krypthonas:
    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 15:58:18 schrieb RadiationKing:
    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 19:30:43 schrieb viggi:
    ja rigo, wenn man zu blöd ist....
am 11. 02. 2003 um 10:29:17 schrieb Benny:
    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 22:03:29 schrieb Rigo:
    Der script funtz kein bisschen
am 28. 10. 2002 um 17:12:11 schrieb BlackPearl:
    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 16:35:56 schrieb Dogfish:
    Mal ausnahmsweise ein Cooles Script!!!!!!!!!
am 2. 08. 2002 um 20:14:01 schrieb tatwaffe:
    wie lässt sich die geschwindigkeit ändern mit der die farbänderung durchgeführt wird ?
Zeige Kommentare 1 - 10 von 28 insgesamt
<< | 1 2 3 >| >>
Kommentar-Seite 1 von 3

Hier können Sie Probleme oder Kommentare zu diesem Script hinterlassen.

Name:
eMail:
Kommentar zum Script:
Was ergibt 3 + 5:
 
 


Bewerten Sie dieses Script
1 = sehr gut, 6 = durchgefallen
| 1| 2| 3| 4| 5| 6|
Bisheriger Schnitt von 37 Bewertungen: 2.3243

submenu
Start
TopSeiten
Neuigkeiten
allgemeine Info
Animationen
Bilder
Browser
Cookies
CSS
Datum
DHTML
Effekte
Fenster
Formulare
Frames
Fun
HTML-Tricks
Info
Navigationen
Nützliches
Rechner
Scroller
Spiele
System
Texteffekte
Ticker
web-vorlage
Business Template 03
online
13 User online