Discussion :

[sebac]

Bonjour, j'ai un div contenant une balise image

Code :

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

1
2
3
<div id='imConteneur' >					 		
<img style="z-index:1; position:relative; "  src='dicom.php?quality=100' id='image' onclick='alert("en dessous")'> 					
</div>

et je cherche à avoir un autre div transparent que je vais superposé sur mon image de manière à ce que mon image reste visible. j'ai essayé de faire la superposition en écrivant

Code :

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

<div style="z-index:2; position:relative;" id='eviteImageDrag' onclick='alert("au dessus")' ></div>

et lorsque je teste mon alert c'est toujours en dessous qui s'affiche mais pas le alert du div de dessus.
Merci

[sebac]

j'ai réussi à le faire marcher sous firefox en écrivant

Code :

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

1
2
3
4
<div id='imConteneur' >					 
<div style="z-index:2; " id='eviteImageDrag' onclick='alert("au dessus")' ></div>  		
<img style="z-index:1; position:relative; "  src='dicom.php?quality=100' id='image' onclick='alert("en dessous")'> 				
</div>

mais sous ie(8) ça ne marche pas et mon alert affiche en dessous. Lorsque je clic sur le div sensé être au dessus ce qui veut dire qu'il n'est pas au dessus pourtant sous ff il est bien au dessus. Du coup en cherchant il me semble que c'est un problème d'opacité j'ai donc écrit ceci qui ne marche pas non plus

Code :

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

document.getElementById("eviteImageDrag").style.filter = "alpha(opacity=" + 100 + ")";

voici mon css

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
 
#image{
height:100%;/*100% imConteneur*/
width:100%;
overflow:hidden;
background-color:black;
position:relative;
 
}
 
#eviteImageDrag{
 
 opacity : 0.5; 
 -moz-opacity : 0.5; 
  -ms-filter: "alpha(opacity=100)"; /* IE 8 */ 
  filter : alpha(opacity=100); /* IE < 8 */ 
 -khtml-opacity: .5; 		/* Safari */
 
height:100%;/*100% imConteneur*/
width:100%;
overflow:hidden;
/*background-color:white;*/
position:absolute;/*important pour que la superposition marche*/
 
}

[sebac]

j'ai réussi à le faire marcher juste en activant mon background-color et en le mettant à white dans mon css. Sinon l'explication du pourquoi en faisant ça, ça a marché je ne l'ai pas encore. Voici le nouveau css

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
#image{
height:100%;/*100% imConteneur*/
width:100%;
overflow:hidden;
background-color:black;
position:relative;
 
}
 
#eviteImageDrag{
 
 opacity : 0.0; 
 -moz-opacity : 0.0; 
  -ms-filter: "alpha(opacity=0)";  /*IE 8 */ 
  filter : alpha(opacity=0);  /*IE < 8 */
 -khtml-opacity: 0.0; 		/* Safari */
 
height:100%;/*100% imConteneur*/
width:100%;
overflow:hidden;
background-color:white; /*important pour que la superposition marche*/
position:absolute; /*aussi important pour que la superposition marche*/
 
}