coloration progressive d'une div lors d'un onload

**xess91** · 07/05/2009, 12h55

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 :

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

**RomainVALERI** · 07/05/2009, 13h49

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 javascript :

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

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

**xess91** · 07/05/2009, 14h00

merci de ta réponse mais c'est pas ça qu'il me faut je viens de tester et c'est pareil.

**RomainVALERI** · 07/05/2009, 14h31

et ça :

Code javascript :

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

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 ^^

**xess91** · 07/05/2009, 17h30

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

Participation Xess91 et Nazoom

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

coloration progressive d'une div lors d'un onload

JavaScript

Vue hybride

Discussions similaires

Partager

Partager