Avatar billede dorgbar Nybegynder
01. september 2004 - 16:59 Der er 9 kommentarer og
1 løsning

rolig fadeout(opacity) ved mouseOut

jeg har nogle tabeller jeg gerne vil have skal være lidt slørede men skal blive skarpe og klar når man føre musen henover. Det problem er ordnet og nu skal de så blive sløret igen når man mouseOut'er.
jeg vil gerne have de skal fade ud, istedet for bare at skifte øjeblikkeligt. Jeg har prøvet nogle forskellige ting, og der har være mange problemmer, bl.a. at det kun virkede i internetexplore, og at det der tog volsom meget cpu kraft, hvilket fik siden til at blinke under sådan et.

jeg tænkte på noget i retningen af
----
function fadeout(elm){
  if(elm.filters.alpha.opacity < 76){
    return;
    clearIntercal(elm);
  }
}


OnMouseOut="setInterval('fadeout(this);', 1);"
----
den skal selvfølgelig kunne genbruges både med samme tabel og med andre.

er der nogen der kan hjælpe mig?

/mikael
Avatar billede roenving Novice
01. september 2004 - 17:03 #1
Avatar billede dorgbar Nybegynder
01. september 2004 - 17:06 #2
hehe det lagger og det virke ikke på ting der er inde i det objekt man bruger det på
Avatar billede dorgbar Nybegynder
01. september 2004 - 17:07 #3
det med at det lagger kan forresten også være min egen fejl
Avatar billede roenving Novice
01. september 2004 - 17:12 #4
Det er afhængigt af, hvad du gør, eksempelvis lavede jeg dette eksempel for lang tid siden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fade in - fade out</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK HREF="style/style.css" REL="stylesheet" TYPE="text/css">
<style type="text/css">
body{padding:10px;font-family:Tahoma,Verdana,Arial,sans-serif;text-align:center;background:#EBD3E2;line-height:1.5;overflow:hidden;}
</style>
<script language="javascript" type="text/javascript">
var OpC = new Array();
var endOpC = new Object();
var ie = (document.all)?true:false;
var moz = (navigator.userAgent.indexOf("Gecko")>-1)
function startOpChange(elm,end,tim){
  if (!ie && !moz)return;
  var idx = OpC.length;
    for(var i=0;idx>i;i++){
        if(OpC[i][0]==elm){
          clearInterval(OpC[i][4]);
            idx = i;
            break;
        }
        OpC[idx] = new Array();
    }
  if(idx==0)OpC[idx] = new Array();
   
    if(ie)actOp=elm.filters.alpha.opacity;
    else actOp=(elm.style.MozOpacity*100);
  if (actOp!=end){
    OpC[idx][0]=elm;
    OpC[idx][1]=actOp;
    OpC[idx][2]=end;
    OpC[idx][3]=(end>actOp)?1:-1;
    var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));
    OpC[idx][4]=setInterval("opChange("+idx+")",delayTime);
  }
}
function opChange(idx){
  OpC[idx][1]+=OpC[idx][3];
  if (ie)OpC[idx][0].filters.alpha.opacity=OpC[idx][1];
  else OpC[idx][0].style.MozOpacity=Math.min(0.99,OpC[idx][1]/100);
  if (OpC[idx][1]==OpC[idx][2]){
    clearInterval(OpC[idx][4]);
    return;
  }
}
</script> 
</head>
<body style="font-size:12px;">
<h1 style="line-height:0.8">Working demo #5</h1>
Fade in - fade out på elementer<br><br>
<div name="fisk" alt="Fade-billede" style="float:left;width:250px;height:250px;filter:alpha(opacity=10);-moz-opacity:0.1;" onMouseOver="startOpChange(this,100,1);" onMouseOut="startOpChange(this,10,1);" title="Klik for at se koden" onclick="window.open('Kode/WD5Kode.html','VisKilde','width=800,height=400,scrollbars,resizable');">Denne tekst fader ind ved mouseover og fader ud ved mouseout<br><span style="position:relative;filter:alpha(opacity=100);-moz-opacity:1;color:red;">Denne tekst fader ikke !-)</span></div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="../billede.jpg" width="250" height="250" name="fisk2" alt="Fade-billede" style="filter:alpha(opacity=60);-moz-opacity:0.6;" onMouseOver="startOpChange(this,100,1);" onMouseOut="startOpChange(this,60,1);" title="Klik for at se koden" onclick="window.open('Kode/WD5Kode.html','VisKilde','width=800,height=400,scrollbars,resizable');">
<br><br>
Denne demo illustrerer en javascript-funktion, som fader et vilkårligt antal elementer ind eller ud<br>
-- her illustreret med mouseover og mouseout på images ...<br>
</body>
</html>
Avatar billede web-geek Nybegynder
01. september 2004 - 17:32 #5
Avatar billede dorgbar Nybegynder
01. september 2004 - 17:33 #6
hvad er forksellen på det der og det andet?
Avatar billede roenving Novice
01. september 2004 - 17:36 #7
>>web-geek

*lol*

-- forklaringen får du, hvis du klikker på teksten om framing nede til venstre !-)
Avatar billede dorgbar Nybegynder
01. september 2004 - 18:52 #8
bruger ikke frames, vil have en
<table onmouseover="ditscript()"><tr><td>text</td></tr></table>
hvor den så ikke køre mouseout scriptet når man er på "text".
dit script får alt der ligger "inde" i det tag man har brugt mouseover på,
f.eks <td>'en inde i <table>'en til at aktivere mouseout scriptet.
Avatar billede dorgbar Nybegynder
01. september 2004 - 19:56 #9
har fundet ud af at det virker hvis du bruger scriptet på både onmouseover og på onmouseout
men jeg vil gerne have at den skal skifte til 100% opacity når man mouseover
Avatar billede dorgbar Nybegynder
08. september 2004 - 15:30 #10
slut
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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