Griser une zone d'un div

Version imprimable

20/03/2009, 11h10
calitom

Griser une zone d'un div
Bonjour,

Voici mon script:
Code:

1 2 3 4 5 <div id="conteneur"> <div id="fenetre"></div> <img src="image.jpg"> </div>
Je voudrais mettre un filtre qui grise le div conteneur qui à la taille de l'image.
La contrainte est que le div fenetre doit permettre de voir l'image.

En gros, la zone grisée doit être tout le contenu du div conteneur, sauf la zone du div fenetre...

Je précise que le div fenetre est déplacable...

Comment puis je faire ca?
20/03/2009, 11h26
calitom

En fait je voudrais exactement la meme chose que sur ce site:
http://www.defusion.org.uk/demos/060...bmit=Load+demo
20/03/2009, 14h31
calitom
Je pense avoir compris un peu plus...
Du coup ca n'est pas si simple que je pensais!!

En gros voici le topo:
Code:

1 2 3 4 5 6 7 8 9 <div id="conteneur"> <img src="image.jpg"> <div id="nord"></div> <div id="est"></div> <div id="fenetre"></div> <div id="ouest"></div> <div id="sud"></div> </div>
Les div nord sud est ouest encadre le div fenetre, et ce sont eux qui ont un background black avec un peu d'opacity...
Comme ca on obtien ce que je veux...

Mais là où ca se complique pour moi, c'est que le div fenetre est dragable et resizable...
Donc si je ne me trompe pas, tous les div doivent être en absolute...

Du coup il va falloir que je fasse une fonction javascript pour recalculer la position et la taille de tous mes divs (nord,sud,est,ouest) à chaque déplacement ou agrandissement du div fenetre...

Ca vous semble cohérent?

Si quelqu'un a une solution plus simple, qu'il n'hésite pas à m'en parler!! lol
20/03/2009, 15h11
GihefBey

Bonjour,

Si tu veux exactement le même chose, pourquoi n'utiliserais-tu pas le script ?

<edit>
Ayant mal compris la question, j'ai proposé une solution, reprise en dessous, mais qui omettait le fait de devoir voir l'image en dessous de #fenetre.
J'ai effacé cette solution.
</edit>

-

Ca à l'air d'être plus simple que ma solution!!

J'ai fait un essai vite fait, mais le problème que j'ai, c'est que je vois le fond de la page avec le div fenetre alors que je veux voir l'image...
J'ai l'impression que la transparence s'applique aussi sur l'image...

Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<style type="text/css">
#gris {
  position : absolute;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  background-color : #000;
  filter:alpha(opacity=50);   /* IE */
  -moz-opacity:0.5;           /* Firefox */
  opacity: 0.5;               /* standard CSS3 */
  -khtml-opacity: 0.5;        /* Konqueror */
  }
</style>
<div id="conteneur" style="position:relative;width:500px;height:300px;">
  <div id="gris"></div>
  <div id="fenetre" style="position:absolute;width:50px;height:50px;background-color: #fff;	opacity: 1;filter:alpha(opacity=100);top:172px;left:130px;"> 
  </div>
  <img src="image.jpg" style="width:500px;height:300px;">
</div>

20/03/2009, 17h07
calitom

Y a t'il un moyen pour faire en sorte que le div fenetre soit transparent par rapport au div gris, mais qu'il garde quand meme l'image en arrière plan?