Discussion :

[Cdic83]

Bonjour,
j'ai trouvé sur le net pas mal d'explication pour modifier l'alpha d'une image mais il semblerait que ce ne soit pas forcément le cas pour faire apparaitre et disparaitre une div.

En effet, j'aimerais faire apparetre et disparaitre une div et compte tenu de mes contrainte ( je développe pour de l'embarqué ) je ne peux pas utilisé les framework classique.

J'aimerais faire une apparition disparition progressive d'une div en jouant sur l'alpha ( ou transparence ) , seul probleme... comment.. pour une div.

Merci d'avance, j'ai beau avoir chercher, je viens vers vous car je n'ai pas trouver ce que je voulais.

Merci d'avance

Cordialement

[_ash_]

Tu peux jouer sur la transparence d'un élément html en utilisant sa propriété "opacity" (filter pour IE)
Un peu plus d'infos ici : http://www.quirksmode.org/js/opacity.html

[Sub0]

Une démo rapidos

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
47
48
49
50
<script type="text/javascript">
<!--
 
var nsv=document.layers;
var iev=document.all;
if(!iev)var mov=document.getElementById;
 
var fade=1;          // Pas de l'opacité en %
var fadetime=0;      // Interval en milliseconde de l'itération
var curfadeval=100;  // Valeur courante de l'opacité en %
var fadein=false;    // Sens du fade (boolean)
 
//==========================================================================//
// Définit l'opacité d'un objet en %
//==========================================================================//
function SetOpacity(obj,val){
  if(!obj) return;
  if(!iev) obj.style.MozOpacity=(val/100); 
	else obj.style.filter="alpha(opacity="+(val)+");";
  curfadeval=val;
} 
 
//==========================================================================//
// Fade in et out de "divid"
//==========================================================================//
function fadeinout(){ 
  if(!nsv) var divid=document.getElementById("divid");
  if(divid){
    if(fadein) curfadeval=curfadeval+fade;
    else curfadeval=curfadeval-fade;
    if(curfadeval>=100){
      curfadeval=100;
      fadein=false;
    }
    if(curfadeval<=0){
      curfadeval=0;
      fadein=true;
    }
    SetOpacity(divid,curfadeval);
  }
  setTimeout(fadeinout,fadetime);
}
 
//==========================================================================//
setTimeout(fadeinout,fadetime);
 
-->
</script>
 
<div id="divid" style="width:200px;height:200px;background-color:red"></div>

[Cdic83]

Merci beaucoup les amis.

Vos deux aides m'ont fait réaliser ce que je souhaitais faire.
Merci pour le temps que vous avez pris pour moi.