Bonjour,
Voici le résultat que je souhaite.
Au survol d'une image, elle s’agrandit et un texte apparait par dessus elle. Lorsqu'on retire le curseur de l'image, elle reprend sa taille et le texte disparait.
J'ai l'effet souhaité si ce n'est un problème de focus. C'est à dire que lorsque le curseur passe sur le texte, alors je perd le focus sur l'image et celle-ci reprend sa taille et le texte disparait.
J'ai cherché après beaucoup de solution mais n'ai rien trouvé pour le moment. Je test actuellement bind et unbind, mais ce n'est pas concluant pour le moment.
Je pense que le problème est en partie lié au z-index utilisé pour que le texte passe au dessus de l'image, mais je ne vois pas comment faire autrement pour afficher ce texte. L'idéal serai de trouver une fonction qui rende le texte 'fantôme', c'est à dire qu'il ne prenne pas le focus...
J'utilise bien évidement du Jquery.
Même si je pense pas vraiment que ce soit mon code qui pose problème mais plutôt trouver la bonne fonction, je vous le mets quand même ^^
code HTML :
Code css ( c'est surtout du positionnement ) :
Code Jquery :
Voici le résultat que je souhaite.
Au survol d'une image, elle s’agrandit et un texte apparait par dessus elle. Lorsqu'on retire le curseur de l'image, elle reprend sa taille et le texte disparait.
J'ai l'effet souhaité si ce n'est un problème de focus. C'est à dire que lorsque le curseur passe sur le texte, alors je perd le focus sur l'image et celle-ci reprend sa taille et le texte disparait.
J'ai cherché après beaucoup de solution mais n'ai rien trouvé pour le moment. Je test actuellement bind et unbind, mais ce n'est pas concluant pour le moment.
Je pense que le problème est en partie lié au z-index utilisé pour que le texte passe au dessus de l'image, mais je ne vois pas comment faire autrement pour afficher ce texte. L'idéal serai de trouver une fonction qui rende le texte 'fantôme', c'est à dire qu'il ne prenne pas le focus...
J'utilise bien évidement du Jquery.
Même si je pense pas vraiment que ce soit mon code qui pose problème mais plutôt trouver la bonne fonction, je vous le mets quand même ^^
code HTML :
<div class="menu_accueil">
<a href=""><div class="icon1"><span>test</span><img class="icon1" src="img/menu1.png" alt="Pose d'enrobés" /></div></a>
<a href=""><div class="icon2"><span>test</span><img class="icon2" src="img/menu2.png" alt="Pavage Bordures" /></div></a>
<a href=""><div class="icon3"><span>test</span><img class="icon2" src="img/menu3.png" alt="Pavage Bordures" /></div></a>
<a href=""><div class="icon4"><span>test</span><img class="icon4" src="img/menu4.png" alt="Pavage Bordures" /></div></a>
<a href=""><div class="icon5"><span>test</span><img class="icon5" src="img/menu5.png" alt="Pavage Bordures" /></div></a>
<a href=""><div class="icon6"><span>test</span><img class="icon6" src="img/menu6.png" alt="Pavage Bordures" /></div></a>
<a href=""><div class="icon7"><span>test</span><img class="icon7" src="img/menu7.png" alt="Pavage Bordures" /></div></a>
<a href=""><div class="icon8"><span>test</span><img class="icon8" src="img/menu8.png" alt="Pavage Bordures" /></div></a>
<a href=""><div class="icon9"><span>test</span><img class="icon9" src="img/menu9.png" alt="Pavage Bordures" /></div></a>
</div>Code css ( c'est surtout du positionnement ) :
/****************************************************************************/
/* <<<<<<<<<<<<<<<<<<<<<<<<<< menu_accueil >>>>>>>>>>>>>>>>>>>> */
/**************************************************************************/
div.menu_accueil{
position:relative;
float:left;
border: yellow 0px solid;
margin: 100px 0px 0px 0px;
z-index:0;
}
div.menu_accueil div{
position:absolute;
}
div.menu_accueil span{
position:absolute;
top:30px;
right:25px;
color:red;
display:none;
}
/* par colonne */
div.icon1, div.icon4, div.icon7{
margin-left: -25px;
z-index:0;
}
div.icon1 img, div.icon4 img, div.icon7 img{width: 140px;}
div.icon2, div.icon5, div.icon8{
margin-left: 90px;
z-index:-1;
}
div.icon2 img, div.icon5 img, div.icon8 img{width: 120px;}
div.icon3, div.icon6, div.icon9{
margin-left: 190px;
z-index:-2;
}
div.icon3 img, div.icon6 img, div.icon9 img{width: 100px;}
/* individuel */
div.menu_accueil div.icon1{
margin-top: 0px;
}
div.menu_accueil div.icon2{
margin-top: 23px;
}
div.menu_accueil div.icon3{
margin-top: 42px;
}
div.menu_accueil div.icon4{
margin-top: 140px;
}
div.menu_accueil div.icon5{
margin-top: 148px;
}
div.menu_accueil div.icon6{
margin-top: 153px;
}
div.menu_accueil div.icon7{
margin-top: 275px;
}
div.menu_accueil div.icon8{
margin-top: 265px;
}
div.menu_accueil div.icon9{
margin-top: 258px;
}
Code Jquery :
$("div.icon1").mouseover(function(){
$(this).stop().animate({margin:"-20px 0px 0px -55px"},300);
$(this).children("img").stop().animate({width:"185px"},300);
$(this).children("span").fadeIn();
});
$("div.icon1").mouseout(function(){
$(this).stop().animate({margin:"0px 0px 0px -25px"},300);
$(this).children("img").stop().animate({width:"140px"},300);
$(this).children("span").stop().fadeOut();
});
//$("span").mouseover(function(){ alert('ttt'); });
$("div.icon1").children("span").unbind();