CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

gadebarnet Nybegynder

13. marts 2005 - 11:57 Der er 11 kommentarer og
1 løsning

billede fade.

Jeg vil lave en liste med små billeder, når man så trykker på et billede skal det så komme fadende...

nogle der forstår det ?

Synes godt om

roenving Novice

13. marts 2005 - 12:04 #1

Måske sådan noget: http://www.eksperten.dk/spm/478961#rid4439494 (se også en rettelse i næste indlæg !-)

-- eller helt simpelt: http://roenving.users.whitehat.dk/WD5Opacity.html

Synes godt om

gadebarnet Nybegynder

13. marts 2005 - 12:21 #2

Jeg kan ikke lige få det øverste til at fungere...

Jeg er også i tvivl om du forstår hvad jeg har skrevet (altså at jeg har formuleret mig forkert...)

se her:

x

yyyyyyyyyy

x er mit "billede"

y er så små billeder

Når jeg trykker på y, så skal den fade fra det gamle X til det nye Y

Forstår du ?

Synes godt om

hepou Nybegynder

13. marts 2005 - 12:29 #3

Prøv at tag et kig på www.dynamicdrive.com og se om du ikke kan finde noget der. Der ligger mange scripts til forskellige måder du kan gøre som det du søger.
:)

Synes godt om

roenving Novice

13. marts 2005 - 12:29 #4

Så er det nærmere den, jeg har vist her: http://www.eksperten.dk/spm/512430

Synes godt om

gadebarnet Nybegynder

13. marts 2005 - 12:34 #5

Ahh, ja...

Vi du så hjælpe med lidt ændringer?

Der skal være 12 små, og det skal være mindre, og så gerne onclick og ikke onfucus...

Jeg er ikke helt HAJ til java.. :)

Men det er lige det jeg leder efter.

Synes godt om

gadebarnet Nybegynder

13. marts 2005 - 12:35 #6

HAr lige ændret fra 10 til 50 point...

Synes godt om

roenving Novice

13. marts 2005 - 13:13 #7

Og så i en udgave, som alt andet lige burde være fuldstændig kompatibel ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fade transition billeder</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/599649">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#imgcontainer{
position:relative;
top:0px;
left:0px;
}
.orgImg{
height:70px;
}
.fadeImg{
height:400px;
top:0px;
left:0px;
z-index:1;
}
</style>
<script type="text/javascript" language="JavaScript">
var OpC = new Array(),ie,moz,css3;
function startOpChange(elm,end,tim){
if(!ie&&!moz&&!css3)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();

actOp=(ie)?elm.filters.alpha.opacity:(moz)?Math.round((elm.style.MozOpacity*100)):Math.round((elm.style.opacity*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 if(moz)OpC[idx][0].style.MozOpacity=Math.min(0.9999,OpC[idx][1]/100);
else OpC[idx][0].style.opacity=Math.min(0.9999,OpC[idx][1]/100);
if (OpC[idx][1]==OpC[idx][2]){
clearInterval(OpC[idx][4]);
return;
}
}
var actElm,altElm;
window.onload=function(){
actElm = document.getElementById('img0');
altElm = document.getElementById('img1');
ie = (actElm.filters)?true:false;
moz = (actElm.style.MozOpacity != 'undefined');
css3 = (actElm.style.opacity != 'undefined');
}
function fadeOver(pic,dir){
var tmp = altElm;
altElm = actElm;
actElm = tmp;
trg = actElm;
elm = altElm;
trg.src = pic.src;
sl = 100;//(dir==1)?100:0;
startOpChange(trg,sl,1);
startOpChange(elm,100-sl,1);
}
</script>
</head>

<body>
<div id="imgcontainer">
<img id="img0" src="../billede.jpg" class="fadeImg" style="filter:alpha(opacity=100);-moz-opacity:1;opacity:1"><img id="img1" src="" alt="eksperten_logo_new.gif" class="fadeImg" style="filter:alpha(opacity=0);-moz-opacity:0;opacity:0;position:absolute;z-index:0;">
</div>
<table>
<tr>
<td>
<img src="../billede.jpg" alt="billede.jpg" class="orgImg" onmouseover="fadeOver(this)">
<img src="../eksperten_logo_new.gif" alt="eksperten_logo_new.gif" class="orgImg" onmouseover="fadeOver(this)"></td>
<td>
</td>
</tr>
</table>
</body>

Synes godt om

gadebarnet Nybegynder

13. marts 2005 - 13:43 #8

Super...

Hvad skal jeg ændre for at få den til at køre hurtigere ?

Synes godt om

roenving Novice

13. marts 2005 - 13:51 #9

-- den har jeg selv fumlet med, men ikke fundet løsningen på ,-(

Synes godt om

gadebarnet Nybegynder

13. marts 2005 - 13:58 #10

okay... Jeg beholder den som den er...

den er lækker :)

tak...

Jeg opretter lige et andet spørgsmål du måske kan hjælpe med i samme kategori, men smid lige et svar her...

Synes godt om

roenving Novice

13. marts 2005 - 14:00 #11

Velbekomme '-)

Synes godt om

roenving Novice

13. marts 2005 - 14:05 #12

-- og tak for point ;~}

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 HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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