11497 sujets

JavaScript, DOM et API Web HTML5

Faire apparaitre bloc div au survol de logos

Bonjour.

JE veux faire apparaitre un bloc div au survol de la souris sur des dizaines de logos.
Mon écran est divisé en 2 :

- à droite, j'ai tous mes logos

- à gauche, j'ai le bloc qui apparait au survol de la souris (il contient une image et du texte)

Je pensais utiliser jQuery avec un truc du style :
jQuery(document).ready(function() {
    jQuery('#slideMe1').hide();
    jQuery('#slideMe2').hide();
        jQuery('a#clickMe_1').hover(function() {
        jQuery('#slideMe1').slideToggle(400);
        return false;
    });
    jQuery('a#clickMe_2').hover(function() {
        jQuery('#slideMe2').slideToggle(400);
        return false;
    });
});

Je ne sais pas comment boucler sur la fonction qui afficherait le bloc, ni comment transmettre les paramètres de chaque logo pour lui assigner le bon texte.

Toute aide sera la bienvenue, car je sèche.
Si tu ne veux pas te répéter dans ton code et faire quelque chose de propre, utilise des classes CSS au de l'ID pour cibler tes éléments.
Par exemple tu met une classe logo sur chacun de tes logos et ensuite tu dis qu'au survol de n'importe quel élément ayant la classe logo $('.logo').hover(...) tu vas aller montrer le texte qui lui correspond. Tu peux faire un lien entre le logo et le contenu à afficher en utilisant un attribut html customisé Voir mon exemple.
Modifié par Freez (05 Feb 2015 - 13:55)
J'essaie de l'intégrer dans mon thème Wordpress, mais le code js doit entrer en conflit avec quelque chose car ce code me masque toute ma page (pourtant, quand je regarde le code source, tout y est)

jQuery(document).ready(function() {
	$('.logo').mouseover(function(){
		$('#' + $(this).data('for') ).show();
	});
	$('.logo').mouseleave(function(){
		$('#' + $(this).data('for') ).hide();
	});
});


Si j'enlève les lignes :
$('#' + $(this).data('for') ).show();

et
$('#' + $(this).data('for') ).hide();

ma page s'affiche bien.
Une idée de ce qui peut poser problème ?
Voici ma page :
http://blog1.vitaliform.fr/
Sujet clos
Aller à