11491 sujets

JavaScript, DOM et API Web HTML5

Afficher / cacher un div au survol d'une image

Pages :
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-affich ... 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>

       <div class="img">
            <img src="image.jpg" />
        </div>
   
       <div class="bulle-infos">test</div>


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!!
Il est en dessous du bout de code javascript :


<div class="img">

            <img src="image.jpg" />

        </div>

       <div class="bulle-infos">test</div>


Rien d'autre.
Ah oui, je précise que ça fonctionne avec jquery.

Merci
Désolé, je n'avais pas vu.

Ça peut se faire de plusieurs manières, en voici une:
<script type="text/javascript" language="JavaScript">
$(function() { 
  $('.bulle-infos').hide();
   $('.img').hover(
function () {
   $(this).children('.bulle-infos').fadeIn();
   },
function () {
   $(this).children('.bulle-infos').fadeOut();
   });
});
    </script>
	  <div class="img">
            <img src="image.png" />
<div class="bulle-infos">test</div>
        </div>

Il vaut mieux mettre tout cela dans un document valide.
Une page html qui fait pas exploser le validateur. Avec un doctype, un body, un head etc.
paolo a écrit :
Une page html qui fait pas exploser le validateur. Avec un doctype, un body, un head etc.


Ah oui ok, effectivement lorsque je test j'ai un html complet avec toutes les balises.
Mais par contre ça ne marche pas Smiley decu
Modérateur
Et l'eau,

C'est quoi ce code HTML ? Ça sent la divite aiguë et classite maladive... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
    <head>
        <meta http-equiv="Content-Language" content="fr" />
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>un titre</title>
    </head>

    <body>
        <p><img src="dauphin.png" alt="dauphin" /><span>un dauphin</span></p>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                $("p span").hide();
                $("p img").hover(
                    function(){
                        $(this).siblings("span").fadeIn();
                    },
                    function(){
                        $(this).siblings("span").fadeOut();
                    }
                );
            });
        </script>
    </body>
</html>


<<<EDIT
Si tu veux faire une galerie d'images avec des infos bulles, l'élément ul est ton ami que tu pourras insérer dans un div avec le titre qui va bien.
EDIT;

Bonne soirée Smiley smile
Modifié par niuxe (31 Aug 2010 - 10:22)
@niuxe
Petite erreur: ton second fadeIn devrait être un fadeOut.
Notre ami souhaite que le tooltip reste visible si on le survole, ce qui n'est pas le cas ici.
Modérateur
paolo a écrit :
@niuxe
Petite erreur: ton second fadeIn devrait être un fadeOut.
Notre ami souhaite que le tooltip reste visible si on le survole, ce qui n'est pas le cas ici.


Ah oui oups ! Petite erreur d'inattention... Smiley confused Ça m'apprendra de coder trop vite (erreur corrigée).

Bon code Smiley smile
Modifié par niuxe (31 Aug 2010 - 10:28)
Je ne comprends vraiement pas, ça ne fonctionne pas même si je copie colle le code complet dans une page html (même appelant la source direct depuis jquery).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> 
    <head> 
        <meta http-equiv="Content-Language" content="fr" /> 
        <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
        <title>un titre</title> 
    </head> 
 
    <body> 
        <p><img src="dauphin.png" alt="dauphin" /><span>un dauphin</span></p> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script> 
        <script type="text/javascript"> 
            $(function(){ 
                $("p span").hide(); 
                $("p img").hover( 
                    function(){ 
                        $(this).siblings("span").fadeIn(); 
                    }, 
                    function(){ 
                        $(this).siblings("span").fadeOut(); 
                    } 
                ); 
            }); 
        </script> 
    </body> 
</html>


Pb de compatibilité navigateur ? Je suis sous ff, ça m'étonnerait fort.
Vous avez un ex de page hébergée où ça fonctionne ?

Merci !
cool, j'ai réussi à faire fonctionner ce code.

Par contre avec des span et p ça ne m'arrange pas car j'ai une mise en page qui nécessite des div (notamment via des arrondies de bordure). Bref, j'ai essayé de remanier le script pour que ça colle à mon css, mais ... je ne vois pas comment Smiley decu

Voici le code avec les divs :


	<li>
    <div class="vignette">
    	<div class="img">
        	<div class="img-border-in">
            <a href="url.html"><img src="monimage.jpg"/></a>
            </div>
        </div>
    
    	<div class="bulle-infos">
       		<div class="bulle-infos-border-in">
            <div class="title">
                TITRE
            </div>
    
            <div class="link">
                <a href="lien">TITRE 2</a>
            </div>
                    
            <div class="more">
                <a href="product.php5">Plus d'infos</a>
            </div>
            </div>
        </div>
                
    </div>
    </li>


Merci bcp pour votre aide !!
Modifié par bradeux (02 Sep 2010 - 22:26)
Modérateur
bradeux a écrit :
cool, j'ai réussi à faire fonctionner ce code.

Par contre avec des span et p ça ne m'arrange pas car j'ai une mise en page qui nécessite des div (notamment via des arrondies de bordure). Bref, j'ai essayé de remanier le script pour que ça colle à mon css, mais ... je ne vois pas comment Smiley decu

Voici le code avec les divs :


	<li>
    <div class="vignette">
    	<div class="img">
        	<div class="img-border-in">
            <a href="url.html"><img src="monimage.jpg"/></a>
            </div>
        </div>
    
    	<div class="bulle-infos">
       		<div class="bulle-infos-border-in">
            <div class="title">
                TITRE
            </div>
    
            <div class="link">
                <a href="lien">TITRE 2</a>
            </div>
                    
            <div class="more">
                <a href="product.php5">Plus d'infos</a>
            </div>
            </div>
        </div>
                
    </div>
    </li>


Merci bcp pour votre aide !!


Hello,

Être têtu, ça a du bon. Mais là, je crois que ce n'est pas du tout le cas. En lisant ce bout de code, j'entrevois un code bancale et sémantiquement faux.

Peux tu mettre sur le forum le code de ta page avec comme texte du bolo bolo (lorem ipsum...) ? A moins que le texte soit déjà saisie. Aussi, explique nous ce que tu désires réaliser comme visuel

Au passage, les attributs de bases comme class et id sont acceptés pour les éléments (p, a, li, ul, ol, etc.). Smiley cligne Ainsi, tu évites de reprendre une mise en forme en css dans la plupart des cas.

@ pluche
Modérateur
Et l'eau,

Donc c'est bien ce que je te disais, tu es atteins de la divite aiguë et de la classite maladive....
N'oublie pas que tu peux ajouter l'attribut class à la plupart des éléments. Smiley cligne comme je te l'ai mentionné dans un message précédent. Là, tel que je t'ai écrit le code ci-desous, je ne pense pas que tu aies recours à l'utilisation de cet attribut.


<!-- etc. -->
<li>
    <a href="la-mort-de-pepette-en-prison.html">
        <img src="pepette.jpg" alt="illustration de Pépette en train de caner dans sa taule." />
    </a>
    <div class="info_bulle">
        <h3>La mort de Pépette en prison</h3>
        <p>résumé : Pépette en train de se lamenter sur son sort et récitant constamment ce poème en latin : lorem ipsum dolor sit amet,  consectetur adipiscing elit.Etiam.</p>
        <p><a href="product.php5">Plus d'infos</a></p>
    </div>
</li>
<!-- etc. -->




$(function() {
        $('li .info_bulle').hide();
        $('li img').hover(
            function () {
                $(this).parent().siblings(".info_bulle").fadeIn();
            }, 
            function () {
                $(this).parent().siblings(".info_bulle").fadeOut();
            });
});
//j'avoue que le ciblage a été fait à l'arrache. Toutefois, ça fonctionne correctement. Je pense qu'il y a une meilleur manière de l'optimiser.


J'ai mis un h3, car je suis parti de ton arborescence. Toutefois, je n'ai pas vu de titre de 1er niveau. Est ce normal ?

@pluche
Modifié par niuxe (05 Sep 2010 - 03:13)
Modérateur
bradeux a écrit :
re!

Je ne sais pas si je vais m'en sortir un jour Smiley decu
J'ai remplacé le code de la page test mais rien y fait, ça ne reste pas au survol :
http://www.bradeux.com/testNew/bradeux/

Où j'ai merdé ?


Hey,

En soit tu n'as pas vraiment merdé. Parce que le script tel qu'il est, n'est pas tout à fait conforme à la demande initiale. La logique est : si l'info-bulle (l'objet) est ouvert/visible, on maintient le "moteur"(setTimeOut). Si l'info-bulle (l'objet == rien/null), on referme.

Je te laisse chercher un petit peu et je reviendrai ce soir sur le forum.

Bon code et bonne journée Smiley smile
Modifié par niuxe (06 Sep 2010 - 07:19)
Modérateur
Salut,

niuxe a écrit :
La logique est : si l'info-bulle (l'objet) est ouvert/visible, on maintient le "moteur"(setTimeOut). Si l'info-bulle (l'objet == rien/null), on referme.
Passer par un setTimeout n'est pas vraiment idéal et peu solide. Smiley cligne

En fait, l'erreur vient plutôt du fait que l'événement de fermeture n'est pas déclenché sur le bon élément. Ce n'est pas sur l'image qu'il faut déclencher le fadeOut mais plutôt sur le li.

Par ailleurs, il est préférable de baser le script sur des classes plutôt que sur des tags afin d'éviter des comportements indésirables (Si on se base sur le tag "li", le script va agir sur chaque liste de la page et non seulement sur la galerie d'images).

Enfin, il faut aussi faire attention à ne pas trop figer le script en recourant à des méthodes comme "siblings" car à la moindre variation de structure, le script plante.

En somme, si on prend la structure suivante :
...
<li class="hover"> 
	<a href="http://www.bradeux.com/testNew/bradeux/la-mort-de-pepette-en-prison.html"> 
		<img src="9782266199568.jpg" alt="illustration de Pépette en train de caner dans sa taule."> 
	</a> 
	<div class="info_bulle"> 
		<h3>La mort de Pépette en prison</h3> 
		<p>résumé : Pépette en train de se lamenter sur son sort et récitant constamment ce poème en latin : lorem ipsum dolor sit amet,  consectetur adipiscing elit.Etiam.</p> 
		<p>
			<a href="http://www.bradeux.com/testNew/bradeux/product.php5">Plus d'infos</a>
		</p> 
	</div> 
</li>
...

le script serait de ce type :
$(function() { 
	$('.hover .info_bulle').hide(); 
	$('.hover img').bind('mouseenter', function(e) {
		var _oTarget = e.target;
		while(_oTarget && !$(_oTarget).hasClass('hover')) {
			_oTarget = _oTarget.parentNode;
		}
		$(_oTarget).find('.info_bulle').fadeIn(); 
	});
	$('.hover').bind('mouseleave', function(e) {
		var _oTarget = e.target;
		while(_oTarget && !$(_oTarget).hasClass('hover')) {
			_oTarget = _oTarget.parentNode;
		}
		$(_oTarget).find('.info_bulle').fadeOut();
	});
});

J'ai laissé ici le masquage, au départ, avec la méthode "hide" mais pour être sûr de n'avoir aucune apparition subite au chargement de page, il vaudrait mieux passer par la méthode du préchargement de styles via JS
Pages :
Sujet clos
Aller à