Swap image with jQuery
<p>I want to add a rollover effect to some images in my menu.</p>

<p>The menu is currently a styled unordered list.</p>

<pre><code>&lt;ul id="myMenu"&gt;
  &lt;li&gt; &lt;a href=""&gt;&lt;img src="apple_faded.gif"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt; &lt;a href=""&gt;&lt;img src="banana_faded.gif"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The list is generated dynamically via a loop. What I am trying to do is remove "_faded" part from the image name when I hover over this <code>&lt;li&gt;</code> and do it with jQuery. </p>

<p>I know it's possible, just don't know how.</p>

<hr>

<p>UPDATE:</p>

<p>Here's the working solution:</p>

<pre><code>$("#myMenu li").mouseover(function(){
    var image = $(this).find("img");
    image.attr("src", image.attr("src").replace("_faded", ""));
}).mouseout(function(){
    var image = $(this).find("img");
    image.attr("src", image.attr("src").replace(".gif", "_faded.gif"));
});
</code></pre>
