jquery changer le menu de l'image quand il est sélectionné

Question

J'ai un menu de navigation en utilisant des images, je veux que si l'utilisateur clique sur un menu puis change l'image. Disons que mon menu image est "about-us-our-mission.jpg" puis une fois que l'utilisateur clique sur ce bouton, il deviendra "about-us-our-mission-roll.jpg", donc si l'utilisateur tape un autre bouton comme "about-us-our-pride.jpg" alors il devrait changer en "about-us-our-pride-roll.jpg" et revenir à un autre bouton dans les images précédentes comme "about-us-our-mission-roll.jpg "dans" about-us-our-mission.jpg "

C'est possible?

Merci à l'avance

Tirso

ici est mon menu html

 <ul class="about-nav" id="content-linkwrap"> 
      <li><a href="javascript:void(0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our-mission','','<? echo base_url() ?>images/about-us-our-mission-roll.jpg',1)" class="hrefmenu" id="mission-href"><img src="<?php echo base_url() ?>images/about-us-our-mission.jpg" id="our-mission"/></a></li> 
      <li><a href="javascript:void(0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our-pride','','<? echo base_url() ?>images/about-us-our-pride-roll.jpg',1)" class="hrefmenu" id="pride-href"><img src="<?php echo base_url() ?>images/about-us-our-pride.jpg" id="our-pride"/></a></li>  
      <li><a href="javascript:void(0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our-business','','<? echo base_url() ?>images/about-us-our-philosopy-roll.jpg',1)" class="hrefmenu" id="business-href"><img src="<?php echo base_url() ?>images/about-us-our-philosopy.jpg" id="our-business"/></a></li> 
      <li><a href="javascript:void(0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our-family','','<? echo base_url() ?>images/about-us-our-family-roll.jpg',1)" class="hrefmenu" id="family-href"><img src="<?php echo base_url() ?>images/about-us-our-family.jpg" id="our-family"/></a></li> 
      <li><a href="javascript:void(0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our-profile','','<? echo base_url() ?>images/about-us-our-profile-roll.jpg',1)" class="hrefmenu" id="profile-href"><img src="<?php echo base_url() ?>images/about-us-our-profile.jpg" id="our-profile"/></a></li>                
     </ul> 

voici mon javascript qui va changer le contenu

$("#content-linkwrap .hrefmenu").click(function(){ 

    $clicked = $(this); 
    // if the button is not already "transformed" AND is not animated 

     // each button div MUST have a "xx-button" and the target div must have an id "xx" 
     var idToLoad = $clicked.attr("id").split('-'); 

     //var img = $(this).parent().find("#our-"+idToLoad[0]).attr("src");  
     //we search trough the content for the visible div and we fade it out 
     $("#description").children().filter(":visible").fadeOut("fast", function(){ 
      //once the fade out is completed, we start to fade in the right div 
      $(this).parent().find("#"+idToLoad[0]).fadeIn(); 
     }) 
}); 

Answer 1

Oui, cela est possible. Je voudrais écrire un gestionnaire d'événements avec ce sélecteur: #content-linkwrap img. Notez que je ne me soucie pas de spécifier la classe .hrefmenu car il semble que toutes les balises d'ancrage à l'intérieur de la liste non ordonnée #content-linkwrap soient traitées de manière identique.

Le gestionnaire d'événements alors appeler la fonctionnalité qui définit tous les tags d'image à l'intérieur de #content-linkwrap « off » scène à l'aide du sélecteur #content-linkwrap img et modifier l'attribut src de la balise img sélectionnée pour avoir afficher le « sur » nom de fichier d'image.

Je suis essentiellement "pré-effacement" de toutes les étiquettes d'image avant de mettre l'une d'entre elles sur "on". Notez que ce n'est pas l'approche la plus efficace, mais cela devrait fonctionner correctement pour de petites quantités d'éléments de menu.