Avatar billede satanic_raven Nybegynder
18. juli 2003 - 03:54 Der er 9 kommentarer og
1 løsning

Image fading

Hvodan får jeg i javascript et billede til at fade ind/ud når musen føres hen over det???

Eksempel kan ses her: http://www.tandkarpen.dk

S.R.
Avatar billede roenving Novice
18. juli 2003 - 04:09 #1
Så popper jeg igen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Opacity</title>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<script language="javascript" type="text/javascript">
var OpC = new Array();
var endOpC = new Object();
function startOpChange(elm,end,tim){
  if (!document.all)return;
  clearInterval(endOpC[0]);
  actOp=elm.filters.alpha.opacity;
  if (actOp!=end){
    OpC[0]=actOp;
    OpC[1]=end;
    OpC[2]=(actOp<end)?1:-1;
    var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));
    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>
<form>
<img src="../billede.jpg" name="fisk" style="filter:alpha(opacity=60);"
onMouseOver="startOpChange(this,100,1);"
onMouseOut="startOpChange(this,60,1);">
</form>
</body>
</html>
Avatar billede roenving Novice
18. juli 2003 - 04:10 #2
Vær bare opmærksom på, at filter er en IE-ting ...
Avatar billede satanic_raven Nybegynder
18. juli 2003 - 04:14 #3
Tak for poppet...

Tester lige om det virker...

Kan du eventuelt hjælpe mig med dette: http://www.eksperten.dk/spm/377284 ???

S.R.
Avatar billede satanic_raven Nybegynder
18. juli 2003 - 04:23 #4
Vil gerne gi' dig point for din besvarelse eftersom scriptet virker (kunne bare godt tænke mig lidt info om hvad der gør hvad), men du har jo ikke lavet en besvarelse, kun en kommentering...

S.R.
Avatar billede satanic_raven Nybegynder
18. juli 2003 - 04:34 #5
Kom lige i tanke om, kan man ændre scriptet så fadingen sker gradvist henover billedet, altså at billedet fader in fra venstre mod højre???

S.R.
Avatar billede roenving Novice
18. juli 2003 - 04:34 #6
Den bruger 3 parametre, som gemmes i OpC-arrayet ...

Disse to linjer styrer, at udviklingen foregår:

  OpC[0]+=OpC[2];
  document.all[elm].filters.alpha.opacity=OpC[0];

Oppe i StartOsv. initieres udviklingen her:

    OpC[2]=(actOp<end)?1:-1;//opad eller nedad
    var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));//hvor hurtigt skal vi have fat igen !-)

hth
jes
Avatar billede roenving Novice
18. juli 2003 - 04:46 #7
Nej ikke præcis sådan, men der er en masse transitions man kan lave, men dem har jeg ikke haft fat i, men der er masser af info her:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/filters.asp
Avatar billede roenving Novice
18. juli 2003 - 04:54 #8
-- og tak for points ;~}
Avatar billede satanic_raven Nybegynder
18. juli 2003 - 04:55 #9
Det var så lidt...

S.R.
Avatar billede satanic_raven Nybegynder
18. juli 2003 - 05:11 #10
Har hentet det her script fra: http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm , men kan ikke få det til at virke... Nogen ideer?

På ovenstående adresse har jeg brugt følgende indstillinger:
Transition = GradientWipe
GradientSize = 0.25
WipeStyle = 0 - Left-to-right motion
Motion = Forward

Hvis du kan få det til at virke ville det bare være super, især hvis du kan finde ud af at kombinere det med det fading-script du har givet mig, altså så den ikke går fra én farve til en anden med gradient, men så den bruger gradient-fading... Du ved sikkert hvad det er jeg mener...

Håber at du gider kigge på det... ;-)

--- Her starter scriptet ---

<HEAD>
<SCRIPT>
var startImage ="fruit.gif";
var endImage="mouse.gif";
function doTrans() {
        imgObj.filters[0].orientation='vertical';
        imgObj.filters[0].apply();
        if (oImg.src.indexOf(startImage)!=-1) {
            oImg.src = endImage;
            imgObj.style.backgroundColor = "gold";
            imgObjText.innerHTML =            "<BR><B>Second Page</B><BR><BR>Using the <B>play</B> method reveals the changes in the SPAN element content."        }
        else {
            oImg.src = startImage;
            imgObj.style.backgroundColor = "skyblue";
            imgObjText.innerHTML =            "<BR><b>First Page</b><BR><BR>Using the <B>apply</B> method prepares this SPAN element for content changes."        }
        imgObj.filters[0].play();
}
</SCRIPT>
</HEAD>
<BODY>
<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward); FONT: 9pt/1.3 verdana; WIDTH: 305px; COLOR: black; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR><B>First Page</B><BR><BR>Using the <B>apply</B> method prepares this SPAN element for content changes.</DIV></SPAN><BR><BR>
<BUTTON onclick="doTrans()">Play Transition</BUTTON>
</BODY>

--- Her slutter scriptet ---

S.R.
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