Voile gris avec affichage d'un swf lors de clique

Question

Bonjour,

Voila j'ai une vidéo flash que je voudrais afficher à la suite d'un clique sur un lien hypertexte sur une page.
Je voudrais faire apparaitre un div de couleur unie avec opacité à 50% pour faire un effet de "voile", qui désactive la page à l'arrière plan .
Sur le site de adobe il y a ce div, mais je n'arrive pas à isoler le bout de code qui gère cela  : http://www.adobe.com/products/coldfusion/demos/ .

Comment recréer cet effet ?

Merci beaucoup :)

Zobibol · Answer

Bien le bonjour, il existe plusieurs solutions pour résoudre ce problème:
[*] CSS pure (sans image):

.MyBackDiv{
  position:absolute;
  top: 0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: rgb(0, 0, 0); 
  z-index: 1000; 
  opacity: 0.65; /* pour firefox */
  filter:alpha(opacity=65); /* pour ce brave IE */
  display:none;
}

[*] CSS pure (mais avec image)
.MyBackDiv{
  position:absolute;
  top: 0px;
  left:0px;
  width:100%;
  height:100%;
  z-index: 1000; 
  background-image:url("myGreyPict.png");
  display:none;
}
   il suffit de créer une image myGreyPict avec une opacité de 65 (avec Paint.net ou autre) et le tour est joué.

Attention toutefois au z-Index de la vidéo à ajouter (il doit impérativement être supérieur à 1000 sinon, il sera dessous)...

et enfin, une div:



il ne faut pas oublier de passer le display à block lors du clique sur le lien exemple:

function showMyVideo(){
  document.getElementById("myBackDiv").style.display="block";
}


et la, il y a tout pour que ça marche.


[o-_-o]

kenwaz · Answer

Merci beaucoup  pour cette réponse !

Je vais tester cela tout de suite!

kenwaz · Answer

c'est tout à fait ce que je voulais faire, merci beaucoup

kenwaz · Answer

oups petit soucis: le div s'affiche mais prend 100% de la fenêtre du navigateur mais sans scroller, pas de la taille réele de la page html affichée donc..

exemple: ici

y a t-il moyen de corriger cela?

Zobibol · Answer

Y a un petit soucis sur le lien que tu as fourni... il me renvois au texte de mon précédent message...


[o-_-o]

kenwaz · Answer

oui c'est normale, j'ai mis un texte un peu long sur ma page en exemple et j'ai repris ton post ^^
Scroll en bas, j'yai mis un bouton pour afficher le div

Zobibol · Answer

Bon, on mettra ça sur le compte de la fatigue, mais je crains hélas de ne pouvoir avancé plus, mes compétences en css sont très limitées... mais c'est dans ce sens qu'il va falloir creuser...


[o-_-o]

kenwaz · Answer

pas de problème, le réultat est presque là, merci beaucoup :)

Voile gris avec affichage d'un swf lors de clique

8 réponses

Votre réponse

Discussions similaires