jQuery menu with (onclick) "selected item" image src changing
<p>I am trying to build a menu in jquery with a hover and selected state...</p>

<p>On hover image is replaced with highlighted version and I also need a selected state for when I click a menu item (image replaced to a selected version).</p>

<p>The problem I have is when I click the another menu item I want to turn off any other selected menu items and return them to their original src before selecting the new menu item.</p>

<p>Here is my attempt... :\</p>

<pre><code>  $("#profile_menu ul li").click(function(){                                            
            $(this).addClass("menu_selected")                      
            var img = $(this).children().children(".menu_icon").attr("src")
            var allimgs = $(".menu_icon").attr("src")
            var selected_state = img.replace(".png","_click.png")
            var normalstate = allimgs.replace("_click.png",".png")
            $(".menu_icon").attr("src",normal_state)
            $(this).children().children(".menu_icon").attr("src",selected_state)
        })
</code></pre>

<p><strong>The problem is when I click the next item it changes all of the menu images to the same image...</strong></p>

<p>Thanks in advance,</p>

<p>Chris</p>
