Mod av JavaScript (Jojoxx), hjälp!

2 svar · 261 visningar · startad av xtreme 1 mars 2003

xtremeMedlem sedan juli 20002 056 inlägg

Trådstart1 mars 2003 12:52#1

<style type="text/css">
body{ background-color:rgb(180,180,120); }
a{ color: black; }
</style>
<script language="JavaScript" type="text/javascript">
currentlink=false; steps=12;
function fadein(obj){ if(currentlink){ currentlink.style.color="rgb(0,0,0)"; clearTimeout(fade); } currentlink=obj; currentfade=0; dofadein(); }
function dofadein(){
currentfade=Math.min(255,currentfade+steps);
currentlink.style.color="rgb("+currentfade+","+currentfade+","+currentfade+")";
if(currentfade<255){ fade=setTimeout("dofadein();",20); } else { currentlink.style.color="rgb(255,255,255)"; currentlink=false; }
}
function fadeout(obj){ if(currentlink){ currentlink.style.color="rgb(0,0,0)"; clearTimeout(fade); } currentlink=obj; dofadeout(); }
function dofadeout(){
currentfade=Math.max(0,currentfade-steps);
currentlink.style.color="rgb("+currentfade+","+currentfade+","+currentfade+")";
if(currentfade>0){ fade=setTimeout("dofadeout();",20); } else { currentlink.style.color="rgb(0,0,0)"; currentlink=false; }
}
</script>

<a href="#" onMouseover="fadein(this);" onMouseout="fadeout(this);">En länk</a>
<a href="#" onMouseover="fadein(this);" onMouseout="fadeout(this);">en annan länk</a>
<a href="#" onMouseover="fadein(this);" onMouseout="fadeout(this);">en tredje länk</a>

Som läget är nu är första färgen svart och när pekaren är över så är länken vit. Kan inte ändra så att första färgen ex är röd och sista grön . Länkfägen ( a{ color: black; } ) har jag ändrat färg på och lagt i min css fil och det funkar bra. För att få första färgen röd och andra grön har jag ändrat koden så här

<script language="JavaScript" type="text/javascript">
currentlink=false; steps=12;
function fadein(obj){ if(currentlink){ currentlink.style.color="rgb(255,0,0)"; clearTimeout(fade); } currentlink=obj; currentfade=0; dofadein(); }
function dofadein(){
currentfade=Math.min(255,currentfade+steps);
currentlink.style.color="rgb("+currentfade+","+currentfade+","+currentfade+")";
if(currentfade<255){ fade=setTimeout("dofadein();",20); } else { currentlink.style.color="rgb(0,255,0)"; currentlink=false; }
}
function fadeout(obj){ if(currentlink){ currentlink.style.color="rgb(255,0,0)"; clearTimeout(fade); } currentlink=obj; dofadeout(); }
function dofadeout(){
currentfade=Math.max(0,currentfade-steps);
currentlink.style.color="rgb("+currentfade+","+currentfade+","+currentfade+")";
if(currentfade>0){ fade=setTimeout("dofadeout();",20); } else { currentlink.style.color="rgb(255,0,0)"; currentlink=false; }
}

Ska man inte bara kunna ändra rgb färgerna?

JojoxxMedlem sedan juni 20004 308 inlägg

1 mars 2003 15:51#2

Då moddar vi lite.

<style type="text/css">
body{ background-color:rgb(180,180,120); }
a { color: rgb(255,0,0); }
</style>
<script language="JavaScript" type="text/javascript">
inactiveColor=new Array(255,0,0);
activeColor=new Array(0,255,0);
currentlink=false; steps=50; currentfade=0;
function fadein(obj){ if(currentlink){ currentlink.style.color="rgb("+inactiveColor.join(",")+")"; clearTimeout(fade); } currentlink=obj; currentfade=0; dofadein(); }
function dofadein(){
	var rgb=new Array();
	currentfade++;
	for(var i=0;i<3;i++){
		rgb[i]=inactiveColor[i]+Math.round((activeColor[i]-inactiveColor[i])/steps*currentfade);
	}
	currentlink.style.color="rgb("+rgb.join(",")+")";
	if(currentfade<steps){ fade=setTimeout("dofadein();",20); } else { currentlink=false; }
}
function fadeout(obj){ if(currentlink){ currentlink.style.color="rgb("+inactiveColor.join(",")+")"; clearTimeout(fade); } currentlink=obj; currentfade=steps; dofadeout(); }
function dofadeout(){
	var rgb=new Array();
	currentfade--;
	for(var i=0;i<3;i++){
		rgb[i]=inactiveColor[i]+Math.round((activeColor[i]-inactiveColor[i])/steps*currentfade);
	}
	currentlink.style.color="rgb("+rgb.join(",")+")";
	if(currentfade>0){ fade=setTimeout("dofadeout();",20); } else { currentlink=false; }
}
</script>

<a href="#" onMouseover="fadein(this);" onMouseout="fadeout(this);">En länk</a>
<a href="#" onMouseover="fadein(this);" onMouseout="fadeout(this);">en annan länk</a>
<a href="#" onMouseover="fadein(this);" onMouseout="fadeout(this);">en tredje länk</a>

Lägg märke till att stilmallens värde för färg på a och arrayen inactiveColor är samma, d.v.s. default-färgen på länken. Arrayen activeColor innehåller målfärgen på faden. Allt i RGB.

colioneMedlem sedan juni 20014 421 inlägg

3 mars 2003 08:30#3

Jag kom på att du moddade det förut så att den fadar ner igen när man tar bort muspekaren. men ncär man plötsligt byter länk så slutar den fadea och går direkt tillbaka til originalfärgen.