jquery change image menu when selected

Question

hi to all

I have navigation menu using images, I want that if the user click a menu then change the image. Let say my image menu is "about-us-our-mission.jpg" then once the user hit this button then it will change into "about-us-our-mission-roll.jpg", so if the user hit another button like "about-us-our-pride.jpg" then it should change into "about-us-our-pride-roll.jpg" and back another button into previous images like "about-us-our-mission-roll.jpg" into "about-us-our-mission.jpg"

It is possible?

Thanks in advance

Tirso

here is my html menu

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

here is my javascript which will change the content

$("#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

Yes, this is possible.

I would write an event handler with this selector: #content-linkwrap img. Note that I don't bother with specifying the class .hrefmenu since it looks like all of the anchor tags inside of the #content-linkwrap unordered list are handled identically.

The event handler would then call functionality that sets all image tags inside of #content-linkwrap to "off" stage using the selector #content-linkwrap img and then modify the src attribute of the selected img tag to have it display the "on" image filename.

I am essentially "pre-clearing" all of the image tags before setting one of them to "on". Note that this isn't the most efficient approach, but it should work fine for small amounts of menu items.