jquery change image menu when selected
<p>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"</p>

<p>It is possible?</p>

<p>Thanks in advance</p>

<p>Tirso</p>

<p>here is my html menu</p>

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

<p>here is my javascript which will change the content</p>

<pre><code>$("#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();
  })
});
</code></pre>
