Afficher / cacher un div au survol d'une image

bradeux Messages postés 1 Date d'inscription mardi 3 mai 2005 Statut Membre Dernière intervention 29 août 2010 - 29 août 2010 à 19:18
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 3 sept. 2010 à 18:12
Bonjour à tous,

J'ai trouvé sur ce forum un petit bout de code bien utile pour afficher / cacher des divs au survol d'une image.
(http://forum.alsacreations.com/topic-5-41262-1-RESOLU-JQuery-et-affichage-dune-div-lors-du-survol-dune-image.html)

Voici mon code final :
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
$(function() {
   $('.bulle-infos').hide();
   $('.img').hover(

function () {
   $(this).next().fadeIn();
   },
function () {
   $(this).next().fadeOut();
   });

});
    </SCRIPT>

       

            
        

   
       
test


Seulement voila, comment faire pour que lorsque je survole le div bulle-infos, celui-ci reste ouvert?
Pour le moment si je quitte l'image, le div se referme.
J'aimerai qu'il reste afficher si je survole le div bulle-infos. (par contre qu'il se re-ferme bien si je quitte toute la zone (img + bulle-infos).

Une idée ?

Merci!!

2 réponses

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
31 août 2010 à 15:47
Bonjour,
quand on utilise jQuery, la moindre des choses est de compulser la doc, jQuery API hover(), certes c'est en anglais mais bon!!!

;O)
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
3 sept. 2010 à 18:12
Bonjour,
lu dans leur doc et traduit...
.hover( handlerIn(eventObject), handlerOut(eventObject) )
--------------------------
handlerIn (ObjetEvenement) une fonction à exécuter lorsque le pointeur de la souris entre dans l'élément.
---------------------------
handlerOut (ObjetEvenement) une fonction à exécuter lorsque le pointeur de la souris quitte l'élément.

...en gros il ne faut rien faire en sortant de ton img mais le faire en sortant de la zone

un petit exemple pour voir
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
  font-family : Verdana;
  font-size : 13px;
}
div {
  border : 1px solid #a0a0ff;
  width : 400px;
  height : 200px;
  background-color : #e0e0f0;
  padding : 10px;
}
.info {
  background-color : #81bef7;
}
.info_bulle {
  border : 1px solid #faac58;
  background-color : #ffffe0;  
  width : 100px;
  height : 100px;  
}
</style>
<title>le titre</title>
</head>



Le texte qui affiche la bulle et la suite du texte...


  Le texte de l'info Bulle

  avec [# un lien]




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript">
  $(function(){
    $(".info").hover(
      //-- fonction pour le mouseover
      function(){
        //-- recup le div conteneur et affiche
        $(this).parents("div:first").children('.info_bulle').fadeIn();        
      },
      //-- fonction pour le mouseout
      function(){
        return(false);
      }
    );
  });
  $(function(){
    var Obj = $("#D_MAIN");
    Obj.children('.info_bulle').hide();
    Obj.hover(
      function(){ //-- fonction pour le mouseover
        return(false);
      },
      function(){ //-- fonction pour le mouseout
        $(this).children('.info_bulle').fadeOut(); 
      }
    );
  });
</script>

</html>


voila j'ai eu un peu de temps pour regarder plus avant ton problème!

;O)
0