première image en Fondu

**chadoum** · 09/11/2010, 18h38

Bonjour,
Je suis novice en js. Mon problème est le suivant: j'ai intégré une fonction fadepic à mon code mais j'aimerais empêcher les images d'apparaitre une première fois avant que le fondu ne s'enclenche... Comment faire?
Voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="style2.css">
<title>Fading Pic</title>
 
</head>
 
<body> 
<div id= "img0">
<img id="C3a" src="http://www.developpez.net/forums/images/img/C3a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0)">
</div>
<div id ="img1"><img id="R1a" src="http://www.developpez.net/forums/images/img/R1a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0)"></div>
<div id ="img2"><img id="W2a" src="http://www.developpez.net/forums/images/img/W2a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0)"></div>
</body>
 
<script>
var max = 100;
var min = 0;
var opacite=min;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById;
 
function fadePic(){        
                if (opacite<max && up){opacite+=2;}
                if (opacite>min && !up){opacite-=2;}
                if (opacite>=max){up=false;}
                if (opacite<=min){up=true;}
 
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("W2a").style.opacity=opacite/100;
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("R1a").style.opacity=opacite/100;
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("C3a").style.opacity=opacite/100;
document.getElementById('result').value=opacite+"%"
}
setInterval(function(){fadePic();},100)
 
</script>
</body>
</html>

**RomainVALERI** · 09/11/2010, 22h17

Tu peux éventuellement essayer d'ajouter à leur propriété style l'élément

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

visibility: hidden;

, de placer le code JS (celui présent actuellement dans ta balise script) dans une fonction que tu appelles depuis le onload du body, sans oublier de rétablir la visibility à "visible" avant d'exécuter fadePic ^^

**chadoum** · 10/11/2010, 19h25

Si je suis ton raisonnement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="style2.css">
<title>Fading Pic</title>
<script language="Javascript">
function fondu(){
var max = 100;
var min = 0;
var opacite=min;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById;
 
function fadePic(){		
				if (opacite<max && up){opacite+=2;}
				if (opacite>min && !up){opacite-=2;}
				if (opacite>=max){up=false;}
				if (opacite<=min){up=true;}
 
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("W2a").style.opacity=opacite/100;
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("R1a").style.opacity=opacite/100;
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("C3a").style.opacity=opacite/100;
document.getElementById('result').value=opacite+"%"
}
setInterval(function(){fadePic();},100)
}
 
</script>
</head>
 
<body onLoad="fondu();"> 
<div id= "img0">
<img id="C3a" src="images/img/C3a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;">
</div>
<div id ="img1"><img id="R1a" src="images/img/R1a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
<div id ="img2"><img id="W2a" src="images/img/W2a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
</body>
</html>

...Mais voilà elles sont cachées... donc j'ai du placer mon hidden au mauvais endroit...

**RomainVALERI** · 10/11/2010, 19h45

Envoyé par chadoum

...Mais voilà elles sont cachées... donc j'ai du placer mon hidden au mauvais endroit...

Non, il est très bien ^^

Mais tu as dû "zapper" ma remarque :

Envoyé par RomainVALERI

, sans oublier de rétablir la visibility à "visible" avant d'exécuter fadePic ^^

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function fondu(){
var max = 100;
var min = 0;
var opacite=min;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById;

var liste_id = ["W2a", "R1a", "C3a"];// solution "en dur", tirée de ton exemple, 
// mais il vaudrait mieux les récupérer dans l'arbre DOM, notamment avec un 
// getElementsByTagName opérant sur le résultat d'un getElementById... 
// on pourra voir ça dans un second temps ^^
// ou même avec une classe CSS ? 
// ou en "parsant" les id de toutes les images pour retrouver un préfixe particulier...
// ce ne sont pas les solutions qui manquent...
for (var i = 0, iMax = liste_id.length; i < iMax; ++i) {
   document.getElementById(liste_id[i]).style.visibility = "visible";
}

function fadePic(){		
				if (opacite<max && up){opacite+=2;}
				if (opacite>min && !up){opacite-=2;}
				if (opacite>=max){up=false;}
				if (opacite<=min){up=true;}
	
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("W2a").style.opacity=opacite/100;
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("R1a").style.opacity=opacite/100;
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("C3a").style.opacity=opacite/100;
document.getElementById('result').value=opacite+"%"
}
setInterval(function(){fadePic();},100)
}

Je n'ai pas testé mais ça correspond mieux à la solution que je décrivais

**chadoum** · 11/11/2010, 16h45

Si je te suis et que je n'oublie rien

! ça donne ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="style2.css">
<title>Fading Pic</title>
<script language="Javascript">
function fondu()
{
var max = 100;
var min = 0;
var opacite=min;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById;
var liste_id = ["W2a", "R1a", "C3a"];
for (var i = 0, iMax = liste_id.length; i < iMax; ++i) 
{document.getElementById(liste_id[i]).style.visibility = "visible";}
 
 function fadePic(){		
				if (opacite<max && up){opacite+=2;}
				if (opacite>min && !up){opacite-=2;}
				if (opacite>=max){up=false;}
				if (opacite<=min){up=true;}
 
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("W2a").style.opacity=opacite/100;
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("R1a").style.opacity=opacite/100;
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("C3a").style.opacity=opacite/100;
document.getElementById('result').value=opacite+"%"
}
setInterval(function(){fadePic();},100)
}
</script>
</head>
 
<body onLoad="fondu();"> 
<div id= "img0">
<img id="C3a" src="images/img/C3a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;">
</div>
<div id ="img1"><img id="R1a" src="images/img/R1a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
<div id ="img2"><img id="W2a" src="images/img/W2a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
</body>
</html>

Mais l'image reste toujours...

**RomainVALERI** · 11/11/2010, 22h01

Ah zut...

Il faut dire que l'ensemble du code date visiblement de nombreuses années... il y a beaucoup d'irrégularités, ça rend tout diagnostic d'autant plus difficile

Par curiosité, où as-tu "trouvé" cette fonction ?

**vrd-74** · 11/11/2010, 22h34

Bonjour

Pour que les images soient bien initialisées en opacité 0 sur firefox (et la plupart des navigateurs modernes), il faut utiliser la propriété opacity.
Cela donne donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<body onLoad="fondu();"> 
<div id= "img0">
<img id="C3a" src="images/img/C3a.jpg" width=225 height=150 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;">
</div>
<div id ="img1"><img id="R1a" src="images/img/R1a.jpg" width=225 height=150 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
<div id ="img2"><img id="W2a" src="images/img/W2a.jpg" width=225 height=150 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
</body>

J'ai testé, cela fonctionne de mon côté.

**chadoum** · 12/11/2010, 19h45

ça fonctionne! Merci
Pour info le code vient de SpaceFrog http://www.developpez.net/forums/d32...du-javascript/ et date de 2007

**RomainVALERI** · 13/11/2010, 05h05

Envoyé par chadoum

Pour info le code vient de SpaceFrog et date de 2007

En lisant ta réponse, première réaction : n'importe quoi...SpaceFrog ?
... mais en regardant l'original de plus près on y trouve quelques détails qui changent quand même ^^

Notamment, au début de ce post je me suis longuement demandé à quoi servait la ligne suivante, et surtout pourquoi il était plus tard fait référence à thePic comme à un élément (vraisemblablement l'image)...

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var ThePic=document.getElementById;

...et la solution c'est qu'il n'y avait rien à comprendre

>>> en fait il manquait juste un tout petit quelque chose de l'exemple de SF :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var ThePic=document.getElementById("spaffySpecial");

En tout cas content que ça fonctionne c'est le principal

première image en Fondu

JavaScript

Discussions similaires

Partager

Partager