Z-Index et transparence d'une image

**yuukuari** · 03/09/2008, 21h49

Bonjour, mon problème est un peu particulier..
J'ai une une petite image avec un fond transparent que je place dans un div (positionné en absolute) par dessus d'autres div :

Pour le placer par dessus, j'utilise un z-index égal à 2 alors que les autres div ont un z-index égal à 1. Jusqu'ici tout va bien l'affichage se fait correctement.

Maintenant je veux rajouter une image dans le div sous les fesses de la demoiselle qui pointera vers une page internet (un forum). L'image s'affiche correctement dessous la fille mais (et c'est normal) on ne peut cliquer sur le lien QUE dans la partie de gauche, là où le div de la fille n'est pas présent.

Je me demandais si c'était possible de gérer la transparence d'un lien .. décider que quelque soit la position en Z d'un lien, il soit cliquable ou sinon travailler sur les zones Alpha (transparentes) d'une image

Le code est le suivant

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
div#fille {
	position:			absolute;
	left: 				50%;
	margin-left: 		        -330px;
	margin-top:			90px;
	background: 		        url(fille.png);
	width:				200px;
	height: 			279px;
	z-index:			2;
}
 
div#forummenu {
	position:			relative;
	margin:				0px;
	margin-bottom:		        20px;
	width:				170px;
	height:				70px;
	border: 			1px solid;
	background: 		        url(forum.png);
	z-index:			1;
}

html:

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
<body>
	<div id="fille"></div>
	<div id="mainframe">
		<div id="bannière"></div>
		<div id="menu">
			<div id="forummenu"></div>
			<div id="contentmenu"></div>		
		</div>
		<div id="content">
			<div id="newscontent">
			</div>
			<div id="maincontent">
			</div>
		</div>
	</div>
</body>

Si c'est pas possible j'ai bien une solution de rechange mais ce serait cool que je puisse résoudre ce problème de façon propre :]

Merci ! Yuuk

**Damouille** · 04/09/2008, 08h44

Je crois que ce n'est pas possible. Un élément ne peut pas être à la fois au dessus et en dessous. Tu va devoir utilisiser ta solution de secours qui est je pense une div vide par dessus.

**Bovino** · 04/09/2008, 08h56

Tu ne peux pas mapper l'image de la fille pour avoir une zone cliquable à l'endroit où tes deux div sont superposées ?

**yuukuari** · 04/09/2008, 18h35

Oui comme je le pensais c'est un peu louche d'avoir seulement une partie du div qui est au dessus des autres ...

Je pensais mapper l'image en effet mais j'avais pas pensé à la solution du div transparent, je vais essayer tout ça :]

Merci de vos réponses

Yuuk

**nizar94** · 01/10/2009, 17h58

J'ai le même problème, a tu trouvé quelque chose? et c'est quoi ta solution "bricolage" ?

Z-Index et transparence d'une image

Positionnement en CSS avec z-index

Vue hybride

Discussions similaires

Partager

Partager