Linkfarben faden bei MouseOver/Out: Faden geht, aber nicht immer... (HTML, CSS und Javascript)

[thread]2151[/thread]

Linkfarben faden bei MouseOver/Out: Faden geht, aber nicht immer...

Netspider

2003-09-27 21:32

User since
2003-09-25
49 Artikel
BenutzerIn

Hi,

ich hab auf einigen Internetseiten Links gesehen,
die bei mouseover/out von einer farbe zur anderen faden,
ich dachte mir, das kannst du doch auch!

so, nun habe ich angefangen, klappt bis jetzt alles gut,
ABER wenn ich mit der Maus von einem Link direkt zum anderen gehe, fadet der erste nicht wieder zurück und der 2. fadet zu schwarz, also ihm fehlt die farbe, wohin er faden soll.

ich weiß aber nicht, woran es liegen soll!

ich habe alle variablen schon als objekt-eigenschaften der links gesetzt, aber es funktioniert einfach nicht:

[html]
<html>
<head>
<title>Neu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<script language="Javascript">
maxschritt=10;
step=1;//Millisek
ovrlink='#FFFFFF';
outlink='#6890B6';

//#########################################

if(ovrlink.substr(0,1)=='#') ovrlink=ovrlink.substr(1,ovrlink.length-1);
if(outlink.substr(0,1)=='#') outlink=outlink.substr(1,outlink.length-1);

function fade(was)
{
with(was)
{
vrot=parseInt(von.substr(0,2),16);
vgruen=parseInt(von.substr(2,2),16);
vblau=parseInt(von.substr(4,2),16);
brot=parseInt(bis.substr(0,2),16);
bgruen=parseInt(bis.substr(2,2),16);
bblau=parseInt(bis.substr(4,2),16);

if(brot<=vrot) // wird kleiner
{ rdiff=(vrot-brot);
rnimm=maxschritt-1;
rklein=brot;
}
else // wird größer
{ rdiff=(brot-vrot);
rnimm=2*schritt;
rklein=vrot;
}

if(bgruen<=vgruen) // wird kleiner
{ gdiff=(vgruen-bgruen);
gnimm=maxschritt-1;
gklein=bgruen;
}
else // wird größer
{ gdiff=(bgruen-vgruen);
gnimm=2*schritt;
gklein=vgruen;
}

if(bblau<=vblau) // wird kleiner
{ bdiff=(vblau-bblau);
bnimm=maxschritt-1;
bklein=bblau;
}
else // wird größer
{ bdiff=(bblau-vblau);
bnimm=2*schritt;
bklein=vblau;
}

rot=Math.round(rklein+((rnimm-schritt)/(maxschritt-1))*rdiff).toString(16);
gruen=Math.round(gklein+((gnimm-schritt)/(maxschritt-1))*gdiff).toString(16);
blau=Math.round(bklein+((bnimm-schritt)/(maxschritt-1))*bdiff).toString(16);
if(rot.length<2)rot='0'+rot;
if(gruen.length<2)gruen='0'+gruen;
if(blau.length<2)blau='0'+blau;
neu='#'+rot+gruen+blau;
}
was.style.color=was.neu;
was.schritt++;
w=was;
if(was.schritt<maxschritt)
was.id=setTimeout('fade(w)',step);
}

function f(was,von,bis)
{
was.von=new Object();
was.bis=new Object();
was.schritt=new Object();
was.id=new Object();

was.vrot=new Object();
was.vgruen=new Object();
was.vblau=new Object();
was.brot=new Object();
was.bgruen=new Object();
was.bblau=new Object();
was.rot=new Object();
was.gruen=new Object();
was.blau=new Object();
was.rdiff=new Object();
was.gdiff=new Object();
was.bdiff=new Object();
was.rnimm=new Object();
was.gnimm=new Object();
was.bnimm=new Object();
was.rklein=new Object();
was.gklein=new Object();
was.bklein=new Object();
was.neu=new Object();

was.von=von;
was.bis=bis;
was.schritt=1;

fade(was);
}
</script>
<a href="javascript:alert('Moin');"
onmouseover="f(document.links[0],outlink,ovrlink)"
onmouseout= "f(document.links[0],ovrlink,outlink)"
>hier drüber</a><br>

<a href="javascript:alert('Moin');"
onmouseover="f(document.links[1],outlink,ovrlink)"
onmouseout= "f(document.links[1],ovrlink,outlink)"
>hier drüber</a><br>

<a href="javascript:alert('Moin');"
onmouseover="f(document.links[2],outlink,ovrlink)"
onmouseout= "f(document.links[2],ovrlink,outlink)"
>hier drüber</a>

</body>
</html>
[/html]

Bitte helft mir!

Cu, Netspider

[Edit]Hab die Smiles mal ausgemacht[/Edit]\n\n

perl -e "s;;Ronny Lindner;;m;(..).$;;$l=$1;s;n;;g;m;.{4}$;;$_=$l;$I=$&;m;^(.);;$_.='ts';$_.=$1;$_++;$_++;$_.=$I;print ucfirst;"

pktm

2003-09-27 22:29

User since
2003-08-07
2921 Artikel
BenutzerIn

Hm, ich mach sowas immer mit css.
Ob das besser unterstützt ist als JavaScript it allerdings fraglich.

Code: (dl )

/* links general */
A:link { COLOR: #ff6600; TEXT-DECORATION: none; }
A:active { COLOR: � TEXT-DECORATION: none; }
A:visited { COLOR: #ff6600; TEXT-DECORATION: none; }
A:hover { COLOR: � TEXT-DECORATION: underline; }

mfg pktm

http://www.intergastro-service.de (mein erstes CMS :) )

Netspider

2003-09-27 22:34

User since
2003-09-25
49 Artikel
BenutzerIn

*g* die antwort ist lustig,

kopier meinen code mal in eine htmldatei,
und schau dir an was passiert wenn du über einen link gehst.
die farbe ist nicht sofort die andere, sondern es wird langsam gewechselt!!

das andere wäre ja kein problem, da bräuchte ich nicht so viel javascript

perl -e "s;;Ronny Lindner;;m;(..).$;;$l=$1;s;n;;g;m;.{4}$;;$_=$l;$I=$&;m;^(.);;$_.='ts';$_.=$1;$_++;$_++;$_.=$I;print ucfirst;"

[E|B]

2003-09-28 00:30

User since
2003-08-08
2561 Artikel
HausmeisterIn

@pktm

*gg*
Er meint FADEN, nicht dass die Farbe auf einmal wechselt! :D

Gruß, Erik!

s))91\&\/\^z->sub{}\(\@new\)=>69\&\/\^z->sub{}\(\@new\)=>124\&\/\^z->sub{}\(\@new\)=>);
$_.=qq~66\&\/\^z->sub{}\(\@new\)=>93~;for(@_=split(/\&\/\^z->sub{}\(\@new\)=>/)){print chr;}

It's not a bug, it's a feature! - [CGI-World.de]

format_c

2003-09-30 21:29

User since
2003-08-04
1706 Artikel
HausmeisterIn

Ist wohl nicht für jeden Browser gedacht? Bei mir tut sich da nix.

Gruß Alex

Effizente Linuxshell

Netspider

2003-09-30 21:31

User since
2003-09-25
49 Artikel
BenutzerIn

naja, ich habs nur im IE ausprobiert,
mal sehn obs in Opera geht...

ja, da gehts auch.

perl -e "s;;Ronny Lindner;;m;(..).$;;$l=$1;s;n;;g;m;.{4}$;;$_=$l;$I=$&;m;^(.);;$_.='ts';$_.=$1;$_++;$_++;$_.=$I;print ucfirst;"

View all threads created 2003-09-27 21:32.