IE9 et Diaporama en Javascript

Version imprimable

Bonjour a vous tous,
je suis en train de développez un site web et j'ai fait un diaporama en JavaScript.
Sous Firefox j'ai aucun soucis mais sur IE, le diaporama est comme figé.

Code:

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
function voirImage(num, total, pct)
	{
	  var prec=document.getElementById((num+total-1)%total) ;
	  var nouv=document.getElementById(num) ;
 
	  if (pct<0)
	  {
		nouv.style.opacity=0 ;
		nouv.style.display='' ;
		prec.style.opacity=1;
		nouv.style.filter = 'alpha(opacity=0)';
		prec.style.filter = 'alpha(opacity=1)';
		window.setTimeout(function(){ voirImage(num,total,0)}, 10);		
	  }
	  else
	  if (pct<100)
	  {
		prec.style.opacity=(100-pct)/100 ;
		nouv.style.opacity=pct/100 ;
		nouv.style.filter = 'alpha(opacity=pct/100)';
		prec.style.filter = 'alpha(opacity=(100-pct)/100)';
		window.setTimeout(function(){ voirImage(num,total,pct+1)}, 10);
	  }
	  else
	  {
		prec.style.opacity=0 ;
		prec.style.display='none' ;
		nouv.style.opacity=1 ;
		nouv.style.filter = 'alpha(opacity=1)';
		prec.style.filter = 'alpha(opacity=0)';
		window.setTimeout(function() {voirImage((num+1)%total,total,-1)}, 2000);
 
	  }
	}
 
	window.setTimeout(function(){voirImage(0,14,-1)}, 10);

Pourriez vous m'aidez a résoudre ce problème?

Merci d'avance

10/10/2011, 17h24
SpaceFrog

fais une recherche sur ce forum avec "crossbrowser opacity" ...
http://dmouronval.developpez.com/tut...s/fading1.html
10/10/2011, 17h24
Bovino

Code:

prec.style.filter = 'alpha(opacity=1)';

En mettant 100 à la place de 1, ça devrait être mieux ! :aie:
10/10/2011, 17h40
Eric2a
Salut,

Oui, et il faudrait faire cela aussi...
Code:

1 2 nouv.style.filter = 'alpha(opacity='+pct+')'; prec.style.filter = 'alpha(opacity='+100-pct+')';
Pour que ce soit encore plus mieux de chez mieux.
10/10/2011, 21h13
Raf38690

Ca marche toujours pas :cry:

ie 9 supporte opacity donc pas besoin de passer par les filtrers fait un teste sans filter pour voir ce que sa donne car c'est peut ca qui bloque

Code:

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
 
function voirImage(num, total, pct)
	{
	  var prec=document.getElementById((num+total-1)%total) ;
	  var nouv=document.getElementById(num) ;
 
	  if (pct<0)
	  {
		nouv.style.opacity=0 ;
		nouv.style.display='' ;
		prec.style.opacity=1;
		window.setTimeout(function(){ voirImage(num,total,0)}, 10);		
	  }
	  else
	  if (pct<100)
	  {
		prec.style.opacity=(100-pct)/100 ;
		nouv.style.opacity=pct/100 ;
		window.setTimeout(function(){ voirImage(num,total,pct+1)}, 10);
	  }
	  else
	  {
		prec.style.opacity=0 ;
		prec.style.display='none' ;
		nouv.style.opacity=1 ;
		window.setTimeout(function() {voirImage((num+1)%total,total,-1)}, 2000);
 
	  }
	}
 
	window.setTimeout(function(){voirImage(0,14,-1)}, 10);

10/10/2011, 21h39
Raf38690

Desolé Mekal mais ça marche toujours pas sur IE :?
10/10/2011, 21h43
ABCIWEB

Citation:

Envoyé par mekal

ie 9 supporte opacity donc pas besoin de passer par les filtrers

Quand bien même, mais si tu n'utilise pas filter cela fera un code non fonctionnel pour les utilisateurs des versions antérieures à IE9, et à mon avis tu ferais bien de consulter les pourcentages d'utilisation des différents navigateurs avant de les considérer comme quantité négligeable ;)
10/10/2011, 21h55
Raf38690

Je ne comprend pas ABCIWEB.
tu pourrais m'expliquer ?
10/10/2011, 22h03
Eric2a
Peut-être en respectant un certain ordre ?
Code:

1 2 elementHTML.style.filter='alpha(opacity=50)'; // IE < 9 d'abord elementHTML.style.opacity=0.5; // Standard ensuite
Etant sous XP et donc n'ayant pas droit à IE9, je ne peux pas tester personnellement.
10/10/2011, 22h03
Bovino

Ce que veut dire ABCIWEB (et je suis plutôt d'accord avec lui) c'est que si IE9 supporte la propriété CSS opacity, cela n'est pas vrai pour les versions antérieures de IE, dont la proportion ne peut pas encore être considérée comme négligeable, il est donc important d'utiliser aussi les filters de IE.
10/10/2011, 22h07
Bovino
Citation:

Envoyé par Eric2a

Peut-être en respectant un certain ordre ?

Le préférable est en fait de tester la fonctionnalité :
Code:

1 2 3 4 5 6 if(elementHTML.style.opacity){ elementHTML.style.opacity = ... } else{ elementHTML.style.filter = ... }
10/10/2011, 22h13
Eric2a

Citation:

Envoyé par ABCIWEB

si tu n'utilise pas filter cela fera un code non fonctionnel pour les utilisateurs des versions antérieures à IE9

+1

Citation:

Envoyé par Bovino

il est donc important d'utiliser aussi les filters de IE.

+1

Citation:

Envoyé par Bovino

Le préférable est en fait de tester la fonctionnalité

Oui c'est juste :)

En fait, l'ordre peut être nécessaire lors de l'écriture de la règle en pure CSS et non en Javascript.
10/10/2011, 22h20
Bovino

Citation:

Envoyé par Eric2a

En fait, l'ordre peut être nécessaire lors de l'écriture de la règle en pure CSS et non en Javascript.

Oui, mais pas que :)
Si tu regardes bien, l'ordre est important dans le code que j'ai mis en exemple, parce que si tu testes d'abord la disponibilité de filters, alors IE9 (qui reconnait la propriété opacity), passera dans le if et non dans le else, donc le principe reste valable ;)
10/10/2011, 22h22
Raf38690

D'accord. Donc je dois prendre compte du fait que IE8 n'utilise pas les mêmes propriétés pour faire jouer l'opacité.

Je sais que je vous en demande trop (je suis débutant en javascript :oops: ) mais pourriez vous m'aider a refaire le code en m'expliquant correctement ce que fait le code?
Le code que j'utilise je le comprend mais vous voulez faire des
elementHTML.style.opacity = ...
et des
elementHTML.style.filter= ...

Est ce correcte sur tous les navigateurs ? Comment faire pour modifier les valeur des 2 images vu qu'on recupere pas l'id de l'image ?

Merci beaucoup de votre aide
10/10/2011, 22h40
Eric2a
L'idéal est donc de créer la fonction qui va définir l'opacité de l'élement
Code:

1 2 3 4 5 6 function setOpacity(obj,opacity){ if(obj.style.opacity) obj.style.opacity=opacity; else obj.style.filter='alpha(opacity='+opacity*100+')'; }
où obj correspond à l'Id de l'élement concerné et opacity correspond à l'opacité (0 <= opacity <= 1).

Nous l'appelons ensuite comme ceci...
Code:

1 2 setOpacity(prec, (100-pct)/100); setOpacity(nouv, pct/100);
Citation:

Envoyé par Bovino

Si tu regardes bien, l'ordre est important dans le code que j'ai mis en exemple...

Juste encore comme d'hab. :)
11/10/2011, 05h42
ABCIWEB

Citation:

Envoyé par Raf38690

Je ne comprend pas ABCIWEB.
tu pourrais m'expliquer ?

Bovino t'a donné l'explication. Si tu veux une estimation chiffrée regarde ici
11/10/2011, 11h15
Invité

Citation:

Quand bien même, mais si tu n'utilise pas filter cela fera un code non fonctionnel pour les utilisateurs des versions antérieures à IE9

je le sait bien mais la on est dans un contexte de teste pour ie 9
11/10/2011, 19h06
Raf38690

Ca ne marche toujours pas
11/10/2011, 19h19
Eric2a

Citation:

Envoyé par Raf38690

Ca ne marche toujours pas

C'est le message d'erreur renvoyé par IE9 ou bien ton inconscient ne désire pas qu'on t'aide ?
11/10/2011, 20h42
Raf38690

IE9 me renvoie ce message

Citation:

Impossible d’obtenir la valeur de la propriété « style » : objet null ou non défini.

Pourtant j'utilise la fonction de Eric2a
11/10/2011, 20h49
Eric2a
Est-ce que les variables ci-dessous réferencent bien les élements HTML ?
Code:

1 2 var prec=document.getElementById((num+total-1)%total) ; var nouv=document.getElementById(num) ;
Il est recommandé que le premier caractère d'un identifiant soit une lettre et non un chiffre.

le document.getElementById((num+total-1)%total) et le nouv=document.getElementById(num) font reference a l'id de la photo que j'incremente grace a du code php

Voici les deux fonctions :

Code:

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<?php
function Diaporama($album)
{
  $home=$_SERVER['DOCUMENT_ROOT']."/".$album ;
  $rep=opendir($home) ;
  $i=0;
  $list="<div id='example'>";
  while ($f=readdir($rep))
  {
    $fic=$home."/".$f ;
    if (is_file($fic))
    {
      if (substr($f, 0, 6)!='small_')
      {
        $ficsmall=$home."/small_".$f ;
        $url="./$album/$f" ;
        $urlsmall="/".$album."/small_$f" ;
        $voulu=640 ;
                $list.="<img id='$i' src='$url' width='$voulu' class='fixee'>";
           $i++;
      }
    }
  }
  closedir($rep) ;
  if (0) {
  }
  $list.="</div>";
  echo $list;
}
?>
<script language="Javascript"> 
function voirImage(num, total, pct)
	{
	 var prec=document.getElementById((num+total-1)%total) ;
	  var nouv=document.getElementById(num) ;
 
	  if (pct<0)
	  {
		nouv.style.display='block' ;
 
		if(nouv.style.opacity)
			nouv.style.opacity=0;
		else
		 nouv.style.filter='alpha(opacity=0)';
 
		if(prec.style.opacity)
			prec.style.opacity=1;
		else
		 prec.style.filter='alpha(opacity=1)';
 
		window.setTimeout(function(){ voirImage(num,total,0)}, 10);		
	  }
	  else
	  if (pct<100)
	  {
		if(nouv.style.opacity)
			nouv.style.opacity=''+pct/100+'';
		else
		 nouv.style.filter='alpha(opacity='+pct/100*100+')';
 
		if(prec.style.opacity)
			prec.style.opacity=(100-pct)/100;
		else
		 prec.style.filter='alpha(opacity='+(100-pct)/100*100+')';
 
 
		window.setTimeout(function(){ voirImage(num,total,pct+1)}, 10);
	  }
	  else
	  {		
		if(nouv.style.opacity)
			nouv.style.opacity=1;
		else
		 nouv.style.filter='alpha(opacity=1)';
 
		if(prec.style.opacity)
			prec.style.opacity=0;
		else
		 prec.style.filter='alpha(opacity=0)';
 
 
		prec.style.display='block' ;
		nouv.style.display='none' ;
		window.setTimeout(function() {voirImage((num+1)%total,total,-1)}, 2000);
	  }
	}
	window.setTimeout(function(){voirImage(0,14,-1)}, 10);
</script>
<?php .... ?>

Et en utilisant un identifiant commençant par img par exemple ?

Code:

$list.="<img id='img$i' src='$url' width='$voulu' class='fixee'>";

Code:

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
<script type="text/javascript">
function setOpacity(obj,opacity){
	if(obj.style.opacity)
		obj.style.opacity=opacity;
	else
		obj.style.filter='alpha(opacity='+opacity*100+')';
}
 
function voirImage(num, total, pct){
	var
		prec=document.getElementById('img'+(num+total-1)%total),
		nouv=document.getElementById('img'+num);
 
	if (pct<0){
		nouv.style.display='block' ;
 
		setOpacity(nouv,0);
		setOpacity(prec,1);
 
		window.setTimeout(function(){ voirImage(num,total,0)}, 10);
	}
	else if (pct<100){
		setOpacity(nouv,pct/100);
		setOpacity(prec,(100-pct)/100);
 
		window.setTimeout(function(){ voirImage(num,total,pct+1)}, 10);
	}else{
		setOpacity(nouv,1);
		setOpacity(prec,0);
 
		prec.style.display='block' ;
		nouv.style.display='none' ;
		window.setTimeout(function() {voirImage((num+1)%total,total,-1)}, 2000);
	}
}
window.setTimeout(function(){voirImage(0,14,-1)}, 10);
</script>

11/10/2011, 21h20
Raf38690

Desolé Eric2a mais sa marche toujours pas.
Est ce que l'emplacement du javascript dans la page peut avoir une consequence ?
11/10/2011, 21h26
Eric2a

Oui, si la fonction voirImage est appelée avant que le navigateur n'ai ajouté les élements HTML dans l'arbre DOM.

Mais chez toi ce n'est pas le cas sinon le problême serait survenu chez tous les navigateurs.
11/10/2011, 21h29
Raf38690

Ok.

Mais la fonction que tu vient de me passer ne fait pas marcher le diapo sur firefox.
De quoi ça peut venir ?
11/10/2011, 22h02
Eric2a

J'aurais besoin du code CSS correspondant à la classe fixee pour "tenter" de reproduire le diaporama.

Actuellement, ça fonctionne sans erreur JS mais je n'obtiens qu'une seule transition entre les deux premières images.

voici le css

Code:

1
2
3
4
5
6
7
img.fixee
{
	position:absolute;
	left:0;
	top:0 ;
	opacity:0 ;
}

11/10/2011, 22h28
Raf38690

Maintenant il marche avec IE mais plus avec firefox.
j'ai juste mis le script dans la page ou il y a mon diapo et non dans un fichier que j'appelle a chaque fois

J'ai fait ça parce que je me suis noyé dans ton code...
J'éspère que cela correspond à ce que tu voulais et que c'est compatible multi-navigateurs.

Code:

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test</title>
		<style type="text/css" media="screen">
			#diaporama img{
				position:absolute;
				left:0;
				top:0;
				filter:alpha(opacity=0);
				opacity:0;
			}
		</style>
		<script type="text/javascript">
			var Diaporama=function(){
				var
					precId,nextId,imgCount=0,currentImg=0,opacity=0;
 
				function setOpacity(obj,opacity){
					if(obj.style.opacity)
						obj.style.opacity=opacity;
					else
						obj.style.filter='alpha(opacity='+opacity*100+')';
				}
 
				function doTransition(){
					if(opacity==0){
						precId=document.getElementById('img'+currentImg);
						currentImg=(currentImg+1)% imgCount;
						nextId=document.getElementById('img'+currentImg);
 
						setOpacity(nextId,0);
						setOpacity(precId,1);
 
						opacity+=0.1;
						setTimeout(doTransition,10);
					}
					else if(opacity<1){
						setOpacity(nextId,opacity);
						setOpacity(precId,1-opacity);
 
						opacity+=0.1;
						setTimeout(doTransition,10);
					}else{
						setOpacity(nextId,1);
						setOpacity(precId,0);
 
						opacity=0;
						setTimeout(doTransition,2000);
					}
				}
 
				return{
					init:function(num){
						var i,img,
							diapo=document.getElementById('diaporama');
 
						if(diapo){
							img=diapo.getElementsByTagName('img');
							for(i=0;i<img.length;i++){
								if(img[i].id=='img'+i)imgCount++;
							}
							if(imgCount>0){
								currentImg=num;
								if(currentImg>=0&& currentImg<imgCount)doTransition();
							}
						}
					}
				}
			}();
 
			window.onload=function(){
				Diaporama.init(0);
			}
		</script>
	</head>
	<body>
		<div id="diaporama">
			<img id="img0" src="img-000.jpg" />
			<img id="img1" src="img-001.jpg" />
			<img id="img2" src="img-002.jpg" />
			<!-- etc... -->
		</div>
	</body>
</html>

12/10/2011, 23h13
Raf38690

C'est bon ça marche.
Merci beaucoup a vous tous pour votre énorme aide et désolé si je vous ai fait perdre votre temps.

Cordialement

Raf38690