Afficher / cacher un div au survol d'une image

Hello!

Super! ça marche avec ta méthode koala64!
Est ce que je peux abuser ?

Comme tu pourras le voir sur la page test, j'ai un hover sur image qui l'encadre quand je passe dessus.
Si je survole l'info-bulle, tout est ok mais évidemment le hover sur l'image ne marche plus et l'encadrement s'en va.
http://www.bradeux.com/testNew/bradeux/

J'ai essayé plein de truc... mais je capte pas grand chose au javascript

Tu as une idée ?

Hello,

koala64 a écrit :
Salut,
Passer par un setTimeout n'est pas vraiment idéal et peu solide.

Pourquoi ?

koala64 a écrit :

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).

Je suis d'accord avec toi dans le sens qu'il peut y avoir des soucis de comportement à d'autres endroits de la page. Et donc cibler sur li, cela n'a pas de sens. C'est vrai que pour Bradeux, j'aurais du peut être plus développer mon propos. Je pensais à un truc dans ce style :

<ul id="galerie">
    <!-- etc. -->
</ul>

ou

<div id="galerie">
    <ul>
        <!-- etc. -->
    </ul>
</div>

koala64 a écrit :

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

Pour le script jQuery, j'avais pensé à ceci :

            var obj = null;          

            function checkHover() {
                if (obj) {
                    obj.find('.info_bulle').fadeOut('fast');
                } //if
            } //checkHover            

            $(document).ready(function() {
                $('.info_bulle').hide();
                $('#galerie li').hover(

                function() {
                    if (obj) {
                        obj.find('.info_bulle').fadeOut(200);
                        obj = null;
                    } //if
                    $(this).find('.info_bulle').fadeIn(200);
                },

                function() {
                    obj = $(this);
                    setTimeout("checkHover()",200);
                });
            });

Aussi, je n'ai pas bien saisie ta boucle while. Peux tu m'en dire plus stp ?

@pluche
Modifié par niuxe (06 Sep 2010 - 22:48)

Hello,

koala64 a écrit :
Passer par un setTimeout n'est pas vraiment idéal et peu solide.

niuxe a écrit :
Pourquoi ?

En fait, je pensais que tu voulais te servir d'un setTimeout au lieu de passer par l'événement mouseleave, ce qui aurait rendu le survol peu utilisable.

niuxe a écrit :
Je pensais à un truc dans ce style :

<ul id="galerie">
    <!-- etc. -->
</ul>

ou

<div id="galerie">
    <ul>
        <!-- etc. -->
    </ul>
</div>

Ça résolvait effectivement les éventuelles interactions que de se baser sur un identifiant. Néanmoins, il est préférable de se baser sur une classe, ce qui donne la possibilité de se servir de ce "module" en différents endroits de la page. Bref, l'idée, c'est surtout de rendre ses fonctions et autres composants réutilisables et le plus ouvert possible.

niuxe a écrit :
Pour le script jQuery, j'avais pensé à ceci :

var obj = null;          

function checkHover() {
	if (obj) {
		obj.find('.info_bulle').fadeOut('fast');
	} //if
} //checkHover            

$(document).ready(function() {
	$('.info_bulle').hide();
	$('#galerie li').hover(

		function() {
			if (obj) {
				obj.find('.info_bulle').fadeOut(200);
				obj = null;
			} //if
			$(this).find('.info_bulle').fadeIn(200);
		},

		function() {
			obj = $(this);
			setTimeout("checkHover()",200);
		});
});

Pour ce bout de code, il serait préférable d'éviter de passer par une variable globale car, là encore, on ouvre une brèche en donnant la possibilité de modifier la valeur de cette variable en cours de route lorsqu'on ajoute de nouveaux scripts.
Et, concernant le setTimeout, il vaut mieux passer une fonction en référence plutôt qu'une chaîne de caractères, pour des raisons de performance :

setTimeout(checkHover, 200);

niuxe a écrit :
Aussi, je n'ai pas bien saisie ta boucle while. Peux tu m'en dire plus stp ?

En fait, lorsqu'on passe par la cible de l'événement (e.target), celle-ci peut être tout élément contenu dans le "li" voire le "li" lui-même. La boucle while permet donc, quelque soit l'élément en cours, de remonter jusqu'à l'élément ayant la classe "hover".

bradeux a écrit :
Est ce que je peux abuser ?

Non ! Salut !



... hum... Sorry ! J'aime bien qu'on me tende la perche !

Bon, en fait, il faut que tu ajoutes au survol de l'image une classe "current" (par exemple) sur le "li" ayant la classe "hover" et que tu la supprimes lorsque le "mouseleave" survient. De là, tu peux, via CSS, jouer sur l'héritage et donc conserver ton encadrement. Pour ceci, je t'invite donc à consulter la documentation de jQuery en axant tes recherches sur les méthodes "addClass" et "removeClass" puis de t'y essayer.
Modifié par koala64 (07 Sep 2010 - 11:20)

koala64 a écrit :
Bon, en fait, il faut que tu ajoutes au survol de l'image une classe "current" (par exemple) sur le "li" ayant la classe "hover" et que tu la supprimes lorsque le "mouseleave" survient. De là, tu peux, via CSS, jouer sur l'héritage et donc conserver ton encadrement. Pour ceci, je t'invite donc à consulter la documentation de jQuery en axant tes recherches sur les méthodes "addClass" et "removeClass" puis de t'y essayer.

Je suis vraiment nul en javascript... j'ai beau chercher, ça marche pas !
Tu peux m'aider une dernière fois ?

Merci!

Bah qu'as-tu tenté au juste ?

J'ai fait ça :

a écrit :

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
$(function() {
$('.hover .bulle-infos').hide();
$('.hover img').bind('mouseenter', function(e) {
var _oTarget = e.target;
while(_oTarget && !$(_oTarget).hasClass('hover')) {
_oTarget = _oTarget.parentNode;
}
$(_oTarget).find('.bulle-infos').fadeIn();
});
$('.hover').bind('mouseleave', function(e) {
var _oTarget = e.target;
while(_oTarget && !$(_oTarget).hasClass('hover')) {
_oTarget = _oTarget.parentNode;
}
$(_oTarget).find('.bulle-infos').fadeOut();
$(_oTarget).find('.current').fadeIn();
});
});
</SCRIPT>



<li class="hover current">
<div class="vignette">
<div class="img">

<div class="img-border-in">
<a href="/livres/9782266199568-les-enfants-de-la-liberte.html">
<img src="9782266199568.jpg"/>
</a>
</div>
</div>

<div class="bulle-infos">

<div class="bulle-infos-border-in">
<div class="title">
Les enfants de la liberté </div>

<div class="crushlink">
Lien
</div>

<div class="more">
<a href="product.php5">Plus d'infos</a>

</div>
</div>
</div>

</div>
</li>

Je ne vois pas de tentative d'utilisation des méthodes addClass et removeClass.

Le mieux serait donc de relire à nouveau ce que je t'ai indiqué précédemment ainsi que les liens que je viens de te donner. Ce n'est pas grand chose à apprendre et ce sera toujours ça d'acquis pour plus tard.