Discussion :

[Raf38690]

IE9 me renvoie ce message

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

Pourtant j'utilise la fonction de Eric2a

[Eric2a]

Est-ce que les variables ci-dessous réferencent bien les élements HTML ?

Code :

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

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.

[Raf38690]

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 :

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
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 .... ?>

[Eric2a]

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

Code php :

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

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

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

[Raf38690]

Desolé Eric2a mais sa marche toujours pas.
Est ce que l'emplacement du javascript dans la page peut avoir une consequence ?

[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.

[Raf38690]

Ok.

Mais la fonction que tu vient de me passer ne fait pas marcher le diapo sur firefox.
De quoi ça peut venir ?

[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.

[Raf38690]

voici le css

Code :

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

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

[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

[Eric2a]

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 :

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

[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