Submitted by openpixel on
Bonjour,
Je dois réaliser une page contenant un menu et une zone de photo. Selon l'élément de menu survolé, cela affiche une div contenant une photo. Celle ci doit restée affichée après le survol jusqu'à ce que l'on vienne se placer sur un autre élément de menu.
Je suis débutant avec jquery (javascript en général) et j'ai réussi à gérer l'affichage d'une div au survol du menu correspondant, mais je n'arrive pas à gérer le fait de ne plus l'afficher lorsque la souris passe sur un autre menu.
L'ensemble doit ressembler à la cette page : Exemple>
Voici mon code de test :
Code html
<div id="beau-menu">
<ul class="menu">
<li class="boeuf">boeuf</li>
<li class="porc">porc</li>
<li class="canard">canard</li>
</ul>
</div>
<div id="boeuf">boeuf</div>
<div id="canard">canard</div>
<div id="porc">porc</div>
Code jquery
$(document).ready(function(){
$("#beau-menu li").each(function(){
//Ajout d'un traitement lorsque la souris entre dans la zone de texte
$("#beau-menu li").mouseover(function(){
$("#"+$(this).attr("class")).css({'display' : 'block'});
});
//Ajout d'un traitement lorsque la souris sort de la zone de texte
$("#beau-menu li").mouseout(function(){
$("#"+$(this).attr("class")).css({'display' : 'block'});
});
});
});Par défaut, mes trois div sont en display:none; dans mon fichier css.
J'imagine que c'est simple. Merci d'avance à ceux qui prendront le temps de m'éclairer.
J’ai changé de méthode en
Permalien Soumis par openpixel le 17 Mai, 2011 - 15:31
J'ai changé de méthode en ajoutant une classe au div correspondant au menu survolé. Le code m'ajoute bien la classe mais je n'arrive pas à l'enlever lorsque je survole un autre élément de menu.
$("#beau-menu li").mouseover(function(){
if ($("#div").hasClass("selected")) {$("#div").removeClass("selected");}
$("#"+$(this).attr("class")).addClass("selected");
$("#"+$(this).attr("class")).css({'display' : 'block'});
});
//Ajout d'un traitement lorsque la souris sort de la zone de texte
$("#beau-menu li").mouseout(function(){
$("#"+$(this).attr("class")).css({'display' : 'block'});
});
j’aurais fait comme
Permalien Soumis par Tofu le 26 Mai, 2011 - 00:55
j'aurais fait comme ça
HTML
<div id="beau-menu"><ul class="menu">
<li class="boeuf">boeuf</li>
<li class="porc">porc</li>
<li class="canard">canard</li>
</ul>
</div>
<div id="boeuf" class="hide">boeuf</div>
<div id="canard" class="hide">canard</div>
<div id="porc" class="hide">porc</div>
CSS
.hide {display:none;}jQuery
$(function(){$('#beau-menu li').hover(function(){
// au mouseover je cache tout les divs
$('.hide').hide();
// je show le div voulu
$("#"+$(this).attr("class")).show();
}, function(){
// je cache au mouseout
$("#"+$(this).attr("class")).hide();
});
});
sur tes lignes a la fin, ça doit être
$("#beau-menu li").mouseout(function(){
$("#"+$(this).attr("class")).css({'display' : 'none'});
});
J’ai finalement trouvé avec
Permalien Soumis par openpixel le 2 Juin, 2011 - 11:17
J'ai finalement trouvé avec un peu d'aide. Ça donne ça :
<script type="text/javascript">
$(document).ready(function(){
$("#sidebar-first li a").each(function(){
//au survol :
$(this).mouseover(function(){
//recuperation de la class de l'élément du menu
var elClass = $(this).attr("class");
//on affiche l'id correspondant
$("#"+elClass).css("display","block");
//on affiche l'id correspondant
//on masque toutes les div de #conteneur qui ne sont pas ma div.
$("#conteneur div:not(#"+elClass+")").hide();
$("#"+elClass+"-titre").css("display","block");
});
});
});
</script>
Mon problème venait du fait que je n'arrivais pas à masquer les autres div au survol d'un lien. En espérant que ça puisse aider quelqu'un au passage. Merci beaucoup Tofu pour ta contribution.