how to change images on mouseover and leave
<p>here is my site: <a href="http://iaddesign.com/beta/portfolio.php" rel="nofollow">http://iaddesign.com/beta/portfolio.php</a></p>

<p>i tried this:</p>

<pre><code>$("#portfolio li img").hover(

function() {


 $(this).attr("src", function() {

 return "images/" + this.alt + ".png";

 }),


 $(this).attr("src", function() {


 return "images/" + this.alt + "-over.png";

 });
</code></pre>

<p>but what it does is not show the image (for some reason) then when i mouse over the image shows then when i take my mouse off nothign happends. i want all is </p>

<p>when the page loads the each images src will equal to what is in the alt attribuate concated with .png</p>

<p>but when the mouse goes over the image the src equals </p>

<p>its alt attribe + "-over.png" then when the mouse leaves it goes back to what alt was + ".png"</p>
