Notifikationer

Markér alle som læst Log ud

sthen Nybegynder

23. maj 2003 - 01:55 Der er 6 kommentarer og
1 løsning

Langsom ændring i opacity ved OnMouseOver og OnMouseOut

Har følgende kode, som ændrer opacity på billedet ved OnMouseOver og OnMouseOut.

<img src="images/stenfisk.gif" name="fisk" style="filter:alpha(opacity=60);" onmouseover="fisk.filters.alpha.opacity=100" onmouseout="fisk.filters.alpha.opacity=60">

Koden virker i og for sig også fint nok, men...

...jeg kunne godt tænke mig at ændringen i opacity kunne foretages langsommere. Således, at hvor ændringen i øjeblikket sker i samme sekund musen føres over billedet, så ville jeg gerne, om ændringen i opacity tog f.eks. 2 sekunder, og ikke bare en forsinket "udløsning" men en stille og rolig ændring over de f.eks. 2 sekunder.

Nogen forslag, og er det egentlig den rette kategori, eller skal spørgsmålet lægges over i JavaScript i stedet??

/sthen

Tidligere spm:
http://www.eksperten.dk/spm/356099

Synes godt om

roenving Novice

23. maj 2003 - 02:12 #1

Prøv med dette -- ikke testet:

<script language="javascript" type="text/javascript">
var OpC = new Array();
var endOpC;

function startOpChange(elm,strt,end,tim){
if (elm) {
OpC[0]=strt;
OpC[1)=end;
var delayTime = Math.floor(tim*1000/(strt-end));
OpC[2]=(delayTime<0)?-1:1;
endOpC=setInterval(opChange(elm),Math.abs(delayTime));
}
}

function opChange(elm){
OpC[0]+=OpC[2];
elm.filters.alpha.opacity=OpC[0];
if (OpC[0]==OpC[1])
clearInterval(endOpC);
return;
}
}

</script>

<img src="images/stenfisk.gif" name="fisk" style="filter:alpha(opacity=60);" onmouseover="startOpChange(this,100,60,1)" onmouseout="startOpChange(this,60,100,1)">

hth
jes

Synes godt om

sthen Nybegynder

23. maj 2003 - 02:25 #2

Virker desværre ikke.
Opacity ændrer sig ikke, og jeg får også scriptfejl (Du ved det lille gule A nede i hjørnet)

Synes godt om

sthen Nybegynder

23. maj 2003 - 02:49 #3

Fandt dette - det virker:

<script>

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}

clearTimeout(nereidFadeTimers[object.sourceIndex]);

diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}

</script>

<img src="images/stenfisk.gif" name="fisk" style="filter:alpha(opacity=60);" onmouseover="nereidFade(this,100,50,5)" onmouseout="nereidFade(this,60,60,5)">

Synes godt om

roenving Novice

23. maj 2003 - 03:27 #4

Det'r bare i orden .-)

Synes godt om

roenving Novice

23. maj 2003 - 13:18 #5

-- og jeg fandt -- med inspiration hos: http://www.dynamicdrive.com/dynamicindex4/highlightgrad2.htm hvor du fandt din nereidFade -- også ud af det:

<head>

<title>Opacity</title>

<script language="javascript" type="text/javascript">
var OpC = new Array();
var endOpC = new Object();

function startOpChange(elm,strt,end,tim){
if (!document.all)return;
if (strt!=end){
OpC[0]=strt;
OpC[1]=end;
OpC[2]=(strt<end)?1:-1;
var delayTime = Math.floor((tim*1000)/Math.abs((strt-end)));
alert(delayTime+"\n"+OpC[0]+" "+OpC[1]+" "+OpC[2]);
endOpC[0]=setInterval("opChange("+elm.sourceIndex+")",delayTime);
}
}

function opChange(elm){
OpC[0]+=OpC[2];
document.all[elm].filters.alpha.opacity=OpC[0];
if (OpC[0]==OpC[1]){
clearInterval(endOpC[0]);
return;
}
}

</script>

</head>

<body onresize onload>
<form>
<img src="eksperten_logo_new.gif" name="fisk" style="filter:alpha(opacity=60);"
onMouseOver="startOpChange(this,60,100,1);"
onMouseOut="startOpChange(this,100,60,1);">
</form>

</body>

</html>

Synes godt om

doggy82 Praktikant

23. maj 2003 - 13:19 #6

Se os' her http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_alpha

Synes godt om

roenving Novice

23. maj 2003 - 13:33 #7

-- den er ikke dårlig ,-)

-- men jeg kan nu bedre lide min egen fade-in/fade-out -- det er lisom rarere !-)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS