Discussion :

[calitom]

Bonjour,

Voici mon script:

Code :

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

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?

[calitom]

En fait je voudrais exactement la meme chose que sur ce site:
http://www.defusion.org.uk/demos/060...bmit=Load+demo

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

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

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

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

-

[calitom]

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 :

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

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