IE9 et Diaporama en Javascript

Version imprimable

Voir 40 message(s) de cette discussion en une page

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 ?

Voir 40 message(s) de cette discussion en une page