Prise en compte de la transparence des png

Bonjour à tous

Je suis sur le développement d'une page qui, à travers un décor, permet d'emmener vers du contenu (affiché via ajax mais ce n'est pas important pour le soucis que je rencontre).

J'ai un fond général et plusieurs images en png intégrés par dessus ce fond, certaines de ces images sont partiellement (ou entièrement) superposées.

Le CSS du fond "général" est la suivant :

#conteneur_dashboard
{
	position:relative;
	z-index:1;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:100px;
	overflow:visible;
	height:677px;
	width:986px;
	background-image:url(images/dashboard/decor_plateau.png);
	background-repeat:no-repeat;
	background-position:center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Exemple de la gestion d'une des images intégré dans ce bloc "général" :

<div class="dashboard_gestion_univers" id="conteneur_dashboard_eau">
<img src="images/dashboard/decor_eau.png" id="dashboard_eau_img" alt="Eau" />
</div>

#conteneur_dashboard #conteneur_dashboard_eau
{
	width:697px;
	height:155px;
	z-index:5;
	position:absolute;
	top:525px;
	left:68px;
}

Mon soucis est le suivant : Toutes les images sont des PNG avec des zones transparentes. Certaines images se chevauchent mais elles restent toutes visibles (via la transparence des png..).
J'aimerai pouvoir cliquer sur les images, même celles en arrière plan. Cependant la transparence du png n'est pas prise en compte que ce soit en JS ou en CSS pour effectuer cette gestion.
Du coup seules les images au premier plan sont identifié comme cliqué ou hover.

J'ai pas mal cherché sur le net et la seule solution est une gestion via les map
Donc je précise que je voudrai faire ça sans map.

Après peu importe la solution (js ou css ou autre!)

Merci d'avance pour l'aide que vous pouvez m''apporter
Alex

salut,
tout cela est normal, l'opacité d'un élément n'est que visuelle (et encore ce n'est pas l'opacité de l'élément mais de l'image en elle même). Les éléments eux restent bien superposés et tu n'auras pas dans ce cas accès à l'élément du dessous. Il y a toujours moyen de le faire et ça ne doit pas être trop compliqué mais il nous faudrait connaître la structure exacte de ton HTML.

Bonjour et bienvenue,

une piste est d'utiliser pointer-events mais... c'est IE11+
Un poinr de départ : http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/ (et le lien vers MDN)

Merci Felipe!
Je vais creuser de ce côté là. Je pense que dans tous les cas je ne vais pas gérer IE8.. 5 ans ça commence à faire beaucoup pour ce navigateur datant du crétacé du web ><