Changement d'opacité d'une image : lenteur FireFox

**Gladiator** · 11/10/2005, 15h43

Voilà, je me suis fait un petit script qui fait changer l'opacité d'une image progressivement.

Voici le script. La fonction de changement d'opacité est Trans().

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
 
<HTML>
<HEAD>
   <style>
     #img1 {position:absolute;width:200px;heigth:200px;}
     #img2 {position:absolute;width:200px;heigth:200px;}
   </style>
   <script type="text/javascript">
      var opa = 1;
      var opa_ie = 100;
   </script>
</HEAD>
<BODY>
   <IMG id="img1" src="1.jpg"></img>
   <IMG id="img2" src="2.jpg"></img>
   <script>
      i = document.getElementsByTagName("IMG")[1];
      function trans() {
        i.style.opacity=opa;
        i.style.filter='alpha(opacity='+opa_ie+')';
        if (opa >= .0 || opa_ie >= 0){
          opa = opa - .2;
          opa_ie = opa_ie - 10;
          setTimeout("trans()",200);
        }
     }
     trans();
   </script>
</BODY>
</HTML>

Alors, j'utilise donc deux méthode différente qui changent l'opacité, une avec "style.opacity" pour FireFox, et l'autre "style.filter" pour IE. J'ai mis les deux dans la méthode pour faire simple, mais le problème existe quand même lorsque je n'en met qu'une seule.

Le problème est que ce script s'éxécute parfaitement sous IE, mais est d'une lenteur atroce sous FireFox. La transition est lente, et le mouvement du curseur de la souris aussi, pendant l'éxécution de la fonction.

Quelqu'un saurait-il m'aider ?
Et pendant qu'on y est, comme ce script ne fonctionne pas sous Opéra, si quelqu'un peut me dire quelles sont les propriétés à changer pour le faire marcher sous Opéra ?

Merci d'avance...

**Gladiator** · 12/10/2005, 12h22

euh... quelqu'un ? personne ?
C'est pas bien grave...

Merci quand même !

**dasdeb** · 12/10/2005, 22h16

Bizarre, je le trouve effectivement un peu plus lent que sous IE, mais pas au point de dire que c'est d'une lenteur d'escargot.

Dans la mesure où tu mets un Id à tes images, il vaudrait mieux utiliser "getElementById":

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
<HTML>
<HEAD>
   <style>
     #img1 {position:absolute;width:200px;heigth:200px;}
     #img2 {position:absolute;width:200px;heigth:200px;}
   </style>
   <script type="text/javascript">
      var opa = 1;
      var opa_ie = 100;
 
      function trans() {
        i = document.getElementById("img2");
        i.style.opacity=opa;
        i.style.filter='alpha(opacity='+opa_ie+')';
        if (opa >= .0 || opa_ie >= 0){
          opa = opa - .2;
          opa_ie = opa_ie - 10;
          setTimeout("trans()",200);
        }
      }
   </script>
</HEAD>
<BODY onload="trans()">
   <IMG id="img1" src="1.jpg"></img>
   <IMG id="img2" src="2.jpg"></img>
</BODY>
</HTML>

Changement d'opacité d'une image : lenteur FireFox

JavaScript

Discussions similaires

Partager

Partager