Modifier l'alpha d'une DIV

Version imprimable

05/08/2008, 16h21
Cdic83

Modifier l'alpha d'une DIV

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
05/08/2008, 16h59
_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

Une démo rapidos

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

14/08/2008, 10h51
Cdic83

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