IE9 et Diaporama en Javascript

**Raf38690** · 10/10/2011, 17h14

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 :

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
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** · 10/10/2011, 17h24

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

**Bovino** · 10/10/2011, 17h24

Code :

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

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

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

**Eric2a** · 10/10/2011, 17h40

Salut,

Oui, et il faudrait faire cela aussi...

Code :

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

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** · 10/10/2011, 21h13

Ca marche toujours pas

Invité · 10/10/2011, 21h23

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 :

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
 
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** · 10/10/2011, 21h39

Desolé Mekal mais ça marche toujours pas sur IE

**ABCIWEB** · 10/10/2011, 21h43

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** · 10/10/2011, 21h55

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

**Eric2a** · 10/10/2011, 22h03

Peut-être en respectant un certain ordre ?

Code :

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

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** · 10/10/2011, 22h03

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** · 10/10/2011, 22h07

Envoyé par Eric2a

Peut-être en respectant un certain ordre ?

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

Code :

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

1
2
3
4
5
6
if(elementHTML.style.opacity){
    elementHTML.style.opacity = ...
}
else{
    elementHTML.style.filter = ...
}

**Eric2a** · 10/10/2011, 22h13

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** · 10/10/2011, 22h20

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** · 10/10/2011, 22h22

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** · 10/10/2011, 22h40

L'idéal est donc de créer la fonction qui va définir l'opacité de l'élement

Code :

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

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 :

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

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** · 11/10/2011, 05h42

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

Invité · 11/10/2011, 11h15

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** · 11/10/2011, 19h06

Ca ne marche toujours pas

**Eric2a** · 11/10/2011, 19h19

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 ?

IE9 et Diaporama en Javascript

JavaScript

Discussions similaires

Partager

Partager