11484 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] JQuery et affichage d'une div lors du survol d'une image

Bonjour,

Je me suis inspiré de petits tutoriels javascript pour que celui-ci affiche le div enfant lorsqu'on survole une image cliquable. Mais cela ne marche pas.

Code HTML (simplifié) :
<table>
<tr><td>
<a href="#"><img src="image1" /></a>
<div class="infos"><p>Un paysage côtier</p></div>
</td><td>
<a href="#"><img src="image2" /></a>
<div class="infos"><p>Un paysage forestier</p></div>
</td></tr>
</table>


Code Jquery :
$(document).ready(function() {
$('table .infos').hide();

$('table img').hover(
function () {
	$(this).children('div').fadeIn();
}, function () {
	$(this).children('div').fadeOut();
});
});// document ready


Merci d'avance pour votre aide.
Modifié par Asahi (15 Apr 2009 - 19:22)
Hello,

Tu peux déjà simplifier ton script :

$(function() { // version plus court du ready


Dans ton hover, le this correspond à une div enfant des images de ta table si je ne me trompe pas, donc il ne trouve pas ce qu'il devrait afficher.

Ceci devrait fonctionner :
$(function() {

$('table .infos').hide();

$('table img').hover(
function () {
	$('table .infos').fadeIn();
}, function () {
	$('table .infos').fadeOut();
});
});// document ready

Modifié par Skoua (15 Apr 2009 - 17:35)
En effet, ca marche : je survole une image et il m'affiche les .infos.
Le problème, c'est qu'il y en a plusieurs (d'où l'utilisation du class="infos") et que je ne voudrais afficher que le .infos qui se trouve juste après l'img que je survole.

Merci pour ton aide Smiley smile
Si la div est toujours placée après l'image:
$('table img').hover(
function () {
	$(this).next().fadeIn(); // next() correspond au prochain élément dans le DOM
}, function () {
	$(this).next().fadeIn();
});


Si ce n'est pas après, je ferais :
$('table img').hover(
function () {
	$(this).parent().parent().fadeIn();
}, function () {
	$(this).parent().parent().fadeOut();
});


A tester parce que c'est réfléchi à la va-vite. Smiley smile

Je te conseille de regarder la doc de jQuery à chaque fois que tu galères, si tu parles anglais tu trouveras tout ce dont tu as besoin, si t'as compris la base de la syntaxe jQuery, c'est enfantin. Smiley cligne
Doc jQuery
Modifié par Skoua (15 Apr 2009 - 18:39)
Merci beaucoup. C'est vrai que je débute en jQuery, et j'avais déjà fouillé dans la doc, mais bien sûr pas assez.

Ca a marché comme ca car c'est le lien qui est le parent direct de mon div on dirait Smiley smile 

$('table a').hover(
function () {
	$(this).next().fadeIn();
}, function () {
	$(this).next().fadeOut();
});
Ah oui j'ai zappé le a.

Hésite pas à fouiller dans Selectors et Traversing dans la doc, y a toutes les réponses. Smiley biggrin
Sujet clos
Aller à