Schriftfarbe ändern bei MouseOver für Links als Standart???

Agent.Hamster

Yo Leute. Ich bins nochmal wegen dem Mouse Over.

Also ich möchte das meine Links auf der GANZEN Seite diese selbe einstellung haben.

Und zwar so:

Im Normal Fall sollen sie diese Farbe haben: #FFFFFF

Bei MouseOver sollen sie diese Farbe bekommen: #00FF00
und das wichtige dabei ist das sie sich über andere Farbstufen dahin verändern sollen. Beispiel die orangenen Links auf dieser Seite:
http://www.hoppel-sz.de

Ich glaube damit ist alles gesagt. Also wäre super nett wenn ihr mir für diesen Fall den Skript geben könntet.

Danke!!!!!!!!!!!!

Gruß
Agent.hamster

jaaam

versteh ich jetzt nicht ganz..

also, so wie dus schon hast, nur mit einer anderen farbzusammensetzung?

oder wie..

Ja im Prinzip das selbe nur mit anderen Farben. Aber ich habe es bis jetzt ja noch nie hingekriegt. Das ist mein Problem

Agent.Hamster

Wollte nur noch sagen das der Beitrag hier drüber von mit war.

Beatz

Hi Agent.Hamster,

So, habe gerade Deine Mail gelesen. Es kann natürlich nicht gehen, wenn Du etwas ganz anderes machst, als ich schreibe. Im alten Thread habe ich einen Link zu der fade.js angegeben. Lade diese bitte runter. Ändere nichts außer folgende Zeilen. Und bitte diesmal wirklich nichts anderes. In der Datei, die Du mir geschickt hast, haben die ersten 20-30 Zeilen gefehlt. Kein Wunder, dass nichts geht. Außerdem ist darin auch ein Copyright Hinweis enthalten, den man nicht so einfach entfernen darf !!!

Ersetze

Code

fadeColor = "#EEEEEE";

durch

Code

fadeColor = "#00FF00";

Ersetze

Code

autoFade = false;

durch

Code

autoFade = true;

Ersetze

Code

sloppyClass = true;

durch

Code

sloppyClass = false;

That's it!

HTML war soweit in Ordnung, sobald auch ein Link zu finden wäre.

Agent.Hamster

hmm. funktioniert imme noch nicht.

Also das ist der HTML Code mit nem Link:

HTML

<html>


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


<body>




[url='index.htm']Link[/url]</p>
</body>


</html>

Alles anzeigen

und hier der script:

Code

/*****************************************\
||       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          ||
|| [email]mike@westman.org[/email]                      ||
|| _____________________________________ ||
|| uniqueID upgrade by DubMatrix         ||
|| http://www.princefari.com             ||
|| _____________________________________ ||
|| Color conversion from decimal to      ||
|| hex (dehexize function) by:           ||
|| Litejet > [email]litejet@hotmail.com[/email]         ||
|| _____________________________________ ||
|| Fade, hex, setColor functions by:     ||
|| Dak Phoenix > phoenix-archetypes.com  ||
|| _____________________________________ ||
|| domouseover/out based on scripts by   ||
|| The Shadow  > [url]www.icon.co.za/~andrewk[/url] ||
||                                       ||
\*****************************************/


/*************
**** <config>
**/


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


/* set to true or false; true will
** cause all links to fade automatically
** (you won't need to add class="fade")
***/
autoFade = true;


/* set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = false;


/* set to true or false; true will make the script
** work for Macs (IE 5+), but you will have to give
** a name (name="blah") to each link that you want
** to fade.
***/
macCompat = false;


/**
**** </config>
**************/


/*************
**** <install>
**


Now, once you have customized your fading colors,
you need to include your customized .js file on
every page that you want to use it in. You can
include javascript files using this syntax (in
the head of a document):


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


Now that you have the file included, you need to
setup your links a small bit.  Each link that you
want to fade needs to use the fade class.


Example:


[url='blah.html']click here[/url]


Also, the link must be plain text.  This means
that you can't have [b]'s, [i]'s, <font>'s, etc.
inside of the link.


Example of what not to do:


[url='blah.html'][b]click[/b] here[/url]


Have fun!
-Anarchos-


**
**** </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;
}

Alles anzeigen

und wegen dem Copyright, darf ich das Script dann überhaupt benutzen?

Gruß
Agent.Hamster

Beatz

Liegt das fade.js denn im Verzeichnis scripts ???

Agent.Hamster

Oh ! Bin ich blöd Egal, jetzt klappt es auf jedenfall.

Wie kriege ich denn jetzt noch beim Mouse Over ein "overline" und "underline" dazu?

oder pfeile, also so:

Normal: Link

Mouse Over: >>Link<<
natürlich mit der entsprechenden Farbe aber das habe ich ja jetzt!

Beatz

Ich nehme mal an, dass Du StyleSheets verwendest?? Richtig? Dann musst Du bei a:hover folgende Zeile hinzufügen.

Code

text-decoration: overline underline;

Bei dem zweiten muss ich passen.

Beatz

So, nun zu zweitens. Ich bilde mich ja auch noch fort
Folgender Quettext bewirkt, dass vor dem Linktext nun ">>" erscheint:

Code

[url='#']>'+this.innerText" onmouseout="javascript:this.innerText=this.innerText.substr(2)">Linktext[/url]

Wichtig dabei sind die Parameter onMouseOver und onMouseOut.

Wenn Du etwas anderes haben willst, schreibe nochmal.

Agent.Hamster

cool, geht das auch das das auf beiden seiten ist. ich hab das jetzt nicht so hinbekommnen.

und was nicht so schön ist, ist das sich der eigentlich Linktext verschiebt. er sollte ja in der Mitte bleiben. aber kann sein das sich das aufhebt wenn man die Pfeile auch rechts macht.

Ein Frage habe ich dann noch. Ist das deine Seite: http://www.hoppel-sz.de ???

Gruß
Agent.Hamster

Agent.Hamster

noch ne frage habe ich noch wegen den StyleSheets, muss ich die in die fade datei mit einbinden?

Also so ist das doch richtig oder?:

Code

<STYLE type=text/css>TD {
	FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial
}
BODY {
	FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial
}
A {
	TEXT-DECORATION: none
}
v:link {
	TEXT-DECORATION: none
}
A:hover {
	TEXT-DECORATION: underline overline
}
.small {
	FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial
}
</STYLE>

Alles anzeigen

Beatz

Hmmm ... also das mit den Pfeilen auf beiden Seiten muss ich mir morgen mal in Ruhe anschauen, ich bin nicht so wirklich der Javascript-Freak.

Nein, die Style Sheets haben nichts mit der fade.js zu tun, soweit Du Deine Einstellungen so beibehälst.

Die Style-Angaben sind soweit okay, allerdings solltest Du der Richtigkeit halber alle Angaben mit einem Semikolon abschließen. Also so:

Code

<STYLE type=text/css>
TD { 
   FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial;
} 
BODY { 
   FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial;
} 
A { 
   TEXT-DECORATION: none;
} 
v:link { 
   TEXT-DECORATION: none;
} 
A:hover { 
   TEXT-DECORATION: underline overline; COLOR: #00FF00;
} 
.small { 
   FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial;
} 
</STYLE>

Alles anzeigen

Was Du allerdings machen solltest, ist in den StyleSheets die Farbe bei hover angeben, da einige Browser kein faden unterstützen. Dann hast Du zwar nicht den Effekt, aber wenigstens die Farbe.

http://www.hoppel-sz.de ist nicht direkt von mir. Die Seite ist von meinem Onkel (hier als lucky angemeldet). Allerdings habe ich das Layout entworfen und bin an den Inhalten mit beteiligt.

Beatz

Oben in den Styles habe ich übrigens auch schon die Farbe bei MouseOver berichtigt, die gefehlt hat.

Für Deine Pfeile an den Links, kannst Du folgenden Quellcode verwenden.

Code

[url='#']>'+this.innerText+'<<'" onmouseout="javascript:this.innerText=this.innerText.substr(2,this.innerText.length-4)">Linktext[/url]

Wenn der Text zentriert ist, wird er sich nicht verschieben, ansonsten müsste man das ganze innerhalb einer Tabelle lösen, was deutlich komplizierter.

Tags