Søg
Avatar billede technodance.dk Nybegynder
25. marts 2004 - 12:34 Der er 7 kommentarer

Fade ind og du på to billeder

Hej exp'er

overskriften siger sig selv

jeg vil høre om der nogle der har sådaner et script
Avatar billede technodance.dk Nybegynder
25. marts 2004 - 12:36 #1
skal lige sides at jeg har to billeder

eks.

billede1.gif
når jeg så kører musen over billede1 så kommer billede2 fra og den skal fade frem
Avatar billede mm12010 Nybegynder
25. marts 2004 - 12:41 #2
sådan?

http://roenving.users.whitehat.dk/WD5Opacity.html
Avatar billede technodance.dk Nybegynder
25. marts 2004 - 12:43 #3
jamen det er ikke to forskellig billeder
Avatar billede mm12010 Nybegynder
25. marts 2004 - 12:59 #4
IE only:

function chgSrc(img,pic){
    img.src=pic;
    if(document.all&&!window.opera){
        img.filters.blendTrans.apply();
        img.filters.blendTrans.play();
        }
    return;
    }

...

<img src="gfx/pic1.gif" width="190" height="140" style="filter:BlendTrans(Duration=0.5);" onmouseover="chgSrc(this,'gfx/pic2.gif');" onmouseout="chgSrc(this,'gfx/pic1.gif');">
Avatar billede roenving Novice
25. marts 2004 - 13:57 #5
Og en generel, som virker i ie og Gecko-browsere:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fade transition</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/481785">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#imgcontainer{
  position:relative;
  top:0px;
  left:0px;
}
.fadeImg{
  height:200px;
  width:200px;
  top:0px;
  left:0px;
  z-index:1;
}
</style>
<script type="text/javascript" language="JavaScript">
var OpC = new Array();
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=Math.round((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.9999,OpC[idx][1]/100);
  if (OpC[idx][1]==OpC[idx][2]){
    clearInterval(OpC[idx][4]);
    return;
  }
}
function fadeOver(elm,trg,dir){
  trg = document.getElementById(trg);
  sl = (dir==0)?100:0;
  startOpChange(trg,sl,2);
  startOpChange(elm,100-sl,2);
}
</script>
</head>

<body><br>
  <div id="imgcontainer">
    <img id="img1" src="../billede.jpg" class="fadeImg" style="filter:alpha(opacity=100);-moz-opacity:1;"><img id="img2" src="../eksperten_logo_new.gif" class="fadeImg" onmouseover="fadeOver(this,'img1',1);" onmouseout="fadeOver(this,'img1',0);" style="filter:alpha(opacity=0);-moz-opacity:0;position:absolute;z-index:0;">
  </div>
</body>
Avatar billede technodance.dk Nybegynder
25. marts 2004 - 19:21 #6
roenving

hdit script virker fint hvor sætter jeg hasdigheden på fadeing
Avatar billede roenving Novice
26. marts 2004 - 16:48 #7
Tallet 2 i kaldet til startOpChange er det som styrer hastigheden (her 2 sekunder !-)

-- det kan du ændre til en langsommere ved at give det et større tal eller hurtigere ved at sætte det til f.eks. 1 ...
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
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 03/05/202613:59
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
I går 10:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
White papers
Flere white papers »