Farbe der Schrift soll sich bei "Mouse Over" verän

  • Hallo,
    ich möchte das sich die Schrift (z.B. Link1) bei einem Mouse Over (also wenn man mit der Maus drüber geht) verändert.


    Und das nicht nur einfach von weiß auf schwarz, sondern dazwischen sollen noch grautöne liegen. Wie geht das?
    Also ich meine die Schrift ist weiß und wenn man drüber geht wird sie von weiß über die dunkler werdenen grautöne schwarz.



    Wäre nett wenn mir jemand dabei helfen würde. :D

  • Hallo Agent.Hamster,


    meinst Du in etwa sowas, wie die Links auf dieser Homepage:
    ::] http://www.hoppel-sz.de (sind die orangenen Links)


    Das läßt sich nur mit Javascript machen, kann Dir aber gerne das Script schicken bzw. hier posten. *GGG*


    Dazu musst Du folgende Zeile in den Head deiner HTML-Seite einbauen:

    Code
    1. <script language="JavaScript" src="scripts/fade.js"></script>

    Anschließend legst Du - soweit noch nicht vorhanden - ein Verzeichnis "scripts" an. Darin erstellst Du eine Datei fade.js mit folgendem Inhalt:

    Im Bereich config kannst Du die Farbe einstellen und auch die Zeiten bearbeiten. Alle Einstelungen, wie ganz wichtig auch sloopyclass sind im Script erklärt. Viel Spaß damit.


    P.S. Dieses Script wird natürlich nicht von allen Browsern unterstützt. Opera beispielsweise nicht. Ich habe dafür die StyleSheets so angepasst, dass die Farbe beim MouseOver die gleiche ist, nur der Blendeffekt nicht ist.


    Wenn Du irgendwelche Fragen dazu hast, helfe ich gern. *GGG*

  • Also ich habe Probleme beim kopieren. Wenn ich den gesamten Text kopiere und in Frontpage (im HTML Fenster) einfüge, verändert sich der Abstand der Zeichen und so funktioniert es auch nicht. Wie kriege ich das hin ohne das ich alles überarbeiten muss???

  • Hätte ich auch gleich drauf kommen können, du kannst die Datei auch so runterladen. Einfach rechtsklick auf den Link und "Ziel speichern unter ..."
    http://www.hoppel-sz.de/scripts/fade.js


    Das Script musst Du natürlich noch in Deine HTML-Seite wie beschrieben einbinden ;-)

  • Danke aber es klappt noch nicht so ganz. Wenn ich mir die Vorschau ansehe kommt folgender Fehler: " In dem Skript auf dieser Seite ist ein Fehler aufgetreten"
    Dies ist mein kompletter HTML Code der Seite:





    Was mache ich falsch?

  • Hi,


    versuchs mal so:

    HTML
    1. <html>
    2. <head>
    3. <script language="JavaScript" src="scripts/fade.js"></script>
    4. </head>
    5. <body>
    6. ...
    7. </body>
    8. </html>


    Warum der Fehler?
    Du hast das Skript praktisch 2x eingebunden. Es gibt zwei verschiedene Arten ein Javascript einzubinden. Einmal kannst Du es zu einer Datei verlinken (siehe oben) oder aber Du bettest es komplett in die HTML-Seite ein. Und das hast Du als zweites gemacht ...
    Es muss also relativ zum Ordner der HTML-Seite ein Verzeichnis scripts geben, indem die Datei fade.js liegt.


    Dann müsste es gehen.

  • Also irgendwie verstehe ich das noch nicht so ganz. Ich füge diesen Code ein:


    <html>
    <head>
    <script language="JavaScript" src="scripts/fade.js"></script>
    </head>
    </html>


    der code gibt dann die datei an die ich mir runtergeladen habe. aber muss ich nicht eine url angeben?
    in dieser skript datei steht ja ganz oben das hier: kann ich das auch löschen?


    /*****************************************\
    || Fade Script Version 3.1 ||
    ||http://anarchos.xs.mw/fade.phtml ||
    || (c) July 2001 ||
    || _____________________________________ ||
    || Created by: ||
    || Anarchos > anarchos.xs.mw ||
    || _____________________________________ ||
    || auto-startColor by Mike West ||
    || mike@westman.org||
    || _____________________________________ ||
    || uniqueID upgrade by DubMatrix ||
    || http://www.princefari.com ||
    || _____________________________________ ||
    || Color conversion from decimal to ||
    || hex (dehexize function) by: ||
    || Litejet > litejet@hotmail.com||
    || _____________________________________ ||
    || Fade, hex, setColor functions by: ||
    || Dak Phoenix > phoenix-archetypes.com ||
    || _____________________________________ ||
    || domouseover/out based on scripts by ||
    || The Shadow > http://www.icon.co.za/~andrewk ||
    ||||
    \*****************************************/



    ich blicke in dieser skript datei ehrlich gesagt überhaupt nicht durch. Irgendwo muss ich doch auch meine "Link Namen" und Urls angeben. Und die Farben die die Links haben sollen...


    Wäre echt nett wenn ihr mir noch mal helfen würdet. Danke!!! :D

  • Hey Agent.Hamster,


    durch das eigentliche Skript muss man auch nicht durchblicken. Angenommen, Du hast eine fertige HTML-Seite. Irgentwo zwischen <head> und </head> muss folgender Text eingebunden werden.

    Code
    1. <script language="JavaScript" src="scripts/fade.js"></script>


    Damit hast Du erst einmal generel das Skript eingebunden, dass die Linkfarben fadet. Jetzt musst Du dies noch konfigurieren. In der Konfiguration, so wie sie in meinem Skript ist, muss man die Links, die gefadet werden sollen mit der Klasse fade definieren. Ein Link-Tag muss also class="fade" enthalten. Beispielsweise so:

    Code
    1. [url='index2.html']Hier klicken[/url]


    Das ist aber alles oben im Skript erklärt, also was autoFade, sloppyClass etc. bedeutet. Ich würde aber immer die Konfiguration so belassen.


    Farben


    Die Grundfarbe gibst Du in Deinen StyleSheets an. Also wie ein Link aussehen soll, wenn die Maus nicht drüber ist. Es macht auch Sinn, die Farbe dort anzugeben, zu der gefadet werden soll (Das machst Du bei der Angabe :hover), weil faden nicht von allen Browsern unterstützt werden. Allerdings reicht es, wenn Du das für die normalen A-Tags angibst. Wenn die Klasse fade nicht definiert ist, werden die Eigenschaften vererbt. Meine StyleSheets sehen beispielsweise so aus:


    Wie gesagt, das hover angeben für die Browser, die faden nicht unterstützen. Für die Browser, die das Unterstützen, gibst Du die Farbe, zu der gefadet werden soll im Skript an. Und zwar in der Zeile:

    Code
    1. fadeColor = "#EEEEEE"; // color to fade to


    Schau Dir doch am besten mal den Quelltext von http://www.hoppel-sz.de an. Oder Du kannst mir auch mal Deinen Quelltext senden, dann zeige ich Dir direkt dort, wie Du es machen musst. ;-)


    Gerne erkläre ich Dir auch, was es mit den StyleSHeets und Klassen auf sicht hat.

  • ähm ja, jetzt bin ich auf jeden fall schon mal schlauer geworden :) . Aber sind die Codes die du mir genannt hast, alles was das Script enthält? Weil in dem Script von http://www.hoppel-sz.de so viel drin steht.
    Ich würde dir mein Quelltext wohl sagen, aber das ist alles noch nicht fertig.


    Ich will auch in einer Tabelle, in der ca. 50 Links sind, die Links so haben das sie sich verändern. Kann man das Nicht auch generell für alle Links auf der Seite einstellen? Wäre ja am einfachsten. :?


    In Meinem Menü möchte ich die Links auf jeden Fall so haben:



    Home (Farbe: #ffffff) bei Mouse Over soll die Farbe zu #00ff00 generiert werden. und das wie beschrieben über noch andere Farbtöne.


    Wenn möglich soll sich der Link Name auch noch verändern.


    Also so soll er normal sein: Home


    und so bei Mouse Over (1. Schritt): ->->Home<-<-
    (2. Schritt): >->-Home-<-<


    und das soll sich immer wiederholen. Also so das es aussieht als ob die Feile immer wieder neu auf "Home" zugehen.


    Wäre super wenn du mir da helfen könntest


    GRuß


    Agent.Hamster :D

  • Coockies??? Das hat absolut nichts mit Coockies zu tun *GGG* Die Möglichkeit gibt es, also es generell für alle Links anzugeben. Öffne die fade.js im Editor und setze autoFade = true; und sloppyClass = false;. Steht dort alles erklärt, bitte genauer lesen ;-) Datei abspeichern und fertig.
    Tja, das mit dem Pfeilen davon würde sich evtl. auch mittels Javascript lösen lassen. Da müsste ich mich allerdings erst mal ein wenig reinfuchsen, habe ich noch nicht gemacht. Ich werd mal sehen, ob's klappt. Aber das ganze wird dann etwas komplizierter einzubinden sein. Soviel schon vorab. Wenn Du daran wirklich Interesse hast, solltest Du Dich wenigstens mal in die Grundlagen von Javascript einarbeiten, am besten bei SELFHTML.


    Ansonsten hört es sich auch sehr deutlich nach Flash an. Die müsstest Du dann selbst machen bzw. Dich einarbeiten. Ich könnte Dir eine Schaltfläche vorbereiten und würde Dir erklären, wie Du den Text und Link änderst. Den Rest müsstest Du allein machen. Kostenlose Flashbuttons gibt es, auch ohne Werbung, allerdings sehen die super billig aus. Dann setzt Dich lieber hin und lerne etwas Flash ;-) Es gibt tonnenweise Tutorials dazu. Siehe Google.

  • So, danke erstmal wieder für die Hilfe. Jetzt weiß ich immerhin wie das funktionieren soll. Tut es aber leider nicht. Auf der Seite wird gar nichts angezeigt? Kein Link und so.


    Also das ist der Skript:


    <config>


    fadeColor = "#FFFFFF"; // color to fade to
    //fadeColor = "#00FF00";
    stepIn = 18; // delay when fading in
    stepOut = 25; // delay when fading out


    autoFade = false;


    sloppyClass = true;


    macCompat = false;


    </config>


    <install>


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


    Home


    </install>


    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;


    fadeColor = dehexize(fadeColor.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 != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
    if (!srcElement.startColor) {
    srcElement.startColor = (srcElement.style.color)? srcElement.style.color: srcElement.currentStyle.color;
    srcElement.startColor = dehexize(srcElement.startColor.toLowerCase());
    }
    var link = (macCompat? srcElement.name: srcElement.uniqueID);
    if (link) fade(srcElement.startColor,fadeColor,link,stepIn);
    else if (macCompat) alert("Error: Mac Compatility mode enabled, but link has no name.");
    }
    }
    }


    function domouseout() {
    if (document.all){
    var srcElement = event.srcElement;
    if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
    var link = (macCompat? srcElement.name: srcElement.uniqueID);
    if (link) fade(fadeColor,srcElement.startColor,link,stepIn);
    }
    }
    }


    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 && eval(fadeId[0])) {
    var orig = eval(fadeId[0]);
    setColor(orig.startColor[0],orig.startColor[1],orig.startColor[2],orig);
    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;
    }





    und das der HTML Code:



    <html>


    <head>
    <script language="JavaScript" src="scripts/fade.js"></script>
    </head>


    <body>


    </body>


    </html>




    Gruß


    Agent.Hamster :D

  • Hmmm ... schick mir doch bitte mal 'ne Email mit Deinem Quelltext (den kompletten) und auch mit Skript. Schreibe dazu, in welchem Verzeichnis sich diese befinden (relativ zum Verzeichnis Deiner Homepage).


    Dann schaue ich da mal rein.