begin process at 2012 05 28 23:32:07
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Afficher / cacher un div au survol d'une image

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Afficher / cacher un div au survol d'une image

dimanche 29 août 2010 à 19:18:23 | Afficher / cacher un div au survol d'une image

bradeux
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 :
[code]
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
$(function() {
$('.bulle-infos').hide();
$('.img').hover(

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

});
</SCRIPT>

<div class="img">
<img src="image.jpg" />
</div>

<div class="bulle-infos">test</div>[/code]

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!!
mardi 31 août 2010 à 15:47:26 | Re : Afficher / cacher un div au survol d'une image

PetoleTeam

Membre Club
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)
vendredi 3 septembre 2010 à 18:12:07 | Re : Afficher / cacher un div au survol d'une image

PetoleTeam

Membre Club
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
Code Javascript :
<!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>
<body>
<div id="D_MAIN">
Le texte qui <span class="info">affiche la bulle</span> et la suite du texte...
<div class="info_bulle">
  Le texte de l'info Bulle<br>
  avec <a href="#">un lien</a>
</div>
</div>
<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>
</body>
</html>


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

;O)


Cette discussion est classée dans : code, afficher, image, div, survol

Répondre à ce message

Sujets en rapport avec ce message

Clic automatique au survol d'une image [ par Trivis ] Bonjour à tous,je voudrais demander à la communauté de l'aide pour un tout petit script.Je voudrais un bout de code javascript  dans une page html où Récupérer une image [ par MarcoAix ] Bonjour, J'ai vu ce code sur un forum : il permet de récuérer les "div" d'une page et de les afficher sur sa page : loadHtmlFile('http://www.allhtml afficher une image lors du survol de la souri sur une catre [ par tchuinbri ] Bonjour je veux réaliser un effet rollover avec un map.Je sais pas trop comment me prendre, en java script ou CSSJe rappelle que ma carte du monde est afficher une image au survol d'une zone map [ par veroq ] bonjour à tous,je dois faire un organigramme avec les têtes des gens dans des bulles et lorsque l'on passe la souris sur une bulle, une image un peu p génial code pour afficher image onMouseOver texte, mais... [ par vanderstraten ] Bonjour, j'ai trouvé ce lien (en anglais) pour afficher une image onMouseOver du texte mais je cherche à pouvoir afficher plusieurs groupes de textes Retailler div apres chargement image [ par jashugan ] Bonjour, Voilà mon problème, j'ai une lightbox que j'affiche, dans cette lightbox j'ai une image qui se charge. J'ai une fonction javascript qui me Afficher / cacher plusieurs div en même temps à différents endroits. [ par charlie101097 ] Bonjour, je me suis renseigné sur le forum sans trouvé une réponse corrigeant mon problème. N'étant qu'un débutant j'ai assez peu d'idées pour mon pro Afficher/masquer une div [ par samirlipopette ] Bonjour/bonsoir Comme le titre ne l'explique pas vraiment j'ai un soucis avec mon code... Je suis parvenu à faire une partie de ce que je voulais jquery / Jquery UI : Faire apparaître une div et modifier une image puis faire l'inverse [ par monoski ] Bonjour à tous, Voilà ce que j'aimerai faire : J'aimerai réaliser une page avec des titres, puis en dessous une petite image "+" qui lorsqu'on cliq


Nos sponsors


Sondage...

Comparez les prix


iPod touch 3rd Generation (64 Go)
Entre 374€ et 379€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,374 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)