Photo au premier plan

bonjour,
je rencontre un problème pour mettre une photo au premier plan.

je m'explique:
Voial le code html:

<div id="menu">

		
		<div id="monprofil1"><a href="index.html"><img src="images/monprofil1-1.png"></a></div>	
		<div id="monprofil2"><a href="formation.html"><img src="images/monprofil1-2.png"></a></div>	
		<div id="monprofil3"><a href="exppro.html"><img src="images/monprofil1-3.png"></a></div>
		

</div>

et le code css:

#menu {

	margin-right:10%;
	margin-left:10%;
	height:60px;
	width:100%;
        z-index:1;
}


#monprofil1
{
	float:left;
	z-index: 2;
	
}
#monprofil2
{
	float:left;
	z-index: 2;
}
#monprofil3
{
	float:left;
	margin-top:1px;
	z-index: 2;
}

#monprofil2:hover
{
	background: url(../images/maformation1-2.png) ;
	z-index: 3;
	position:relative;
}
#monprofil3:hover
{
	background: url(../images/monexp1-3.png) ;
	z-index: 3;
	position:relative;
}

ce que je voudrai ce que lorsque je passe avec ma souris sur l'image, une autre image vienne par dessus.
cependant avec mon code, la deuxième image reste derrière
pourtant j'ai bien mis z-index de manière logique ...

Quelqu'un peut-il m'aider ?

Salut,

A la vue de ton code, je dirai que c'est normal: tu as une image en dur dans ton html. L'image que tu veux faire apparaitre, gérée en css, apparait en dessous de celle-ci. Il faut donc que ta première image ne soit plus affichée pour voir l'autre.

et commen faire pour la supprimer en css ?

Salut,

Tu pourrais bien rajouter

#monprofil2:hover img { visibility:hidden; }

... mais bon, bof... Perso j'opterais plutôt pour mettre toutes tes images en arrière-plan, tu n'aurais pas ce problème.

ca marche!
merci beaucoup !!

Bonjour,

marcv a écrit :
Perso j'opterais plutôt pour mettre toutes tes images en arrière-plan, tu n'aurais pas ce problème.

C'est une solution correcte UNIQUEMENT si les images sont décoratives, ce qui n'est pas le cas puisque les images sont support de lien et donc porteuse de contenu. Elle DOIVENT donc être présente dans le code HTML avec un attribut alt reprennant l'intitulé du lien.

L'effet de hover se fera avec JavaScript.