IE9 et Diaporama en Javascript [Résolu]

[Raf38690]

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

[SpaceFrog]

fais une recherche sur ce forum avec "crossbrowser opacity" ...
http://dmouronval.developpez.com/tut...s/fading1.html

[Bovino]

Code :

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

En mettant 100 à la place de 1, ça devrait être mieux !

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

[Raf38690]

Ca marche toujours pas

[mekal]

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

[Raf38690]

Desolé Mekal mais ça marche toujours pas sur IE

[ABCIWEB]

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

[Raf38690]

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

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

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

[Bovino]

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 = ...
}

[Eric2a]

Envoyé par ABCIWEB

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

+1

Envoyé par Bovino

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

+1

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.

[Bovino]

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

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

[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);

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.

[ABCIWEB]

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

[mekal]

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

[Raf38690]

Ca ne marche toujours pas

[Eric2a]

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 ?