coloration progressive d'une div lors d'un onload

Version imprimable

Bonjour,

je réouvre un sujet sur un thème que j'avais déjà posté mais j'ai laissé le temps passé et je ne retrouve pas mon script finale; donc je le refait mais je retombe sur le même problème. Le script fonctionne sur IE mais pas sur Moz. Je vous mets mon script :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <head> <script type="text/javascript"> function opacy() { var di ; di = document.getElementById('test'); di.filters.alpha.opacity+=4; di.style.opacity = parseFloat(di.style.opacity,10) + 0.2; } function changeCouleur() { intervalID = setInterval(opacy, 100); } </script> </head> <body onload="changeCouleur();"> <div style="width:500px;height:50px;background-color:blue;opacity:0;filter:alpha(opacity=0);" id="test"> </div>
Merci pour vos aides.

07/05/2009, 13h49
RomainVALERI
C'est probablement assez impropre mais j'ai sous la main un bout de code faisant un traitement spécifique IE/Moz-like pour gérer l'opacité... ça peut toujours te mettre sur la voie ^^
Code:

1 2 3 4 if (window.ActiveXObject)// IE only elem.style.filter = 'alpha(opacity=70)'; else elem.style.MozOpacity = .7;
07/05/2009, 14h00
xess91

merci de ta réponse mais c'est pas ça qu'il me faut je viens de tester et c'est pareil.:D
07/05/2009, 14h31
RomainVALERI
et ça :
Code:

1 2 3 4 if (window.ActiveXObject)// IE only elem.style.filter = 'alpha(opacity=70)'; else elem.style.opacity = .7;
? :?

pour la valeur : je crois que ".7" et "0.7" ont le même effet... à vérifier aussi quand meme ^^

Voila un script fonctionnel pour ceux qui souhaiterai l'essayer :

Participation Xess91 et Nazoom

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
37
38
39
40
41
42
43
44
45
46
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr" dir="ltr">
 
 
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fonction Fade</title>
 
    <style>
      body {
        text-align: center;
      }
    </style>
 
    <script>
 
      function setOpacity(_opacity, _idElement) {
 
        element = document.getElementById(_idElement);
        opacity = (_opacity == 100) ? 99.999 : _opacity;
        element.style.filter = "alpha(opacity:"+opacity+")";// IE/Win
        element.style.KHTMLOpacity = opacity/100;// Safari<1.2, Konqueror
        element.style.MozOpacity = opacity/100;// Older Mozilla and Firefox
		element.style.opacity = opacity/100;// Safari 1.2, newer Firefox and Mozilla, CSS3
      }
 
      function fade(_opacity, _idElement, _delay) {
 
          setOpacity(_opacity, _idElement);
          _opacity = parseInt(_opacity) + 1;
          window.setTimeout("fade('"+_opacity+"', '"+_idElement+"', "+ _delay + ")", _delay);
 
      }
 
 
    </script>
 
  </head>
 
 
  <body onload="fade( '0', 'image', '10')">
    <img id="image" style="filter:alpha(opacity=0);-moz-opacity:.0;opacity:.0;" src="http://www.jb.is.online.fr/blog/wp-content/grabennouitch-linux-inside-23401.png" alt="Image de test"/>
    <br/>
  </body>
</html>