jQuery Forum

Be aware: I'm quite new to jQuery and JavaScript.

First of all, I'm trying to select only part of an img src name. For instance, if it's <img src="image1-reg.png" />, I only want to select "reg.png". Next I would like to replace the select text ("reg.png") with something else (e.g. "over.png"), while also keeping "image-" as part of the src name. I want to accomplish all of this within a hover function, so that the image changes on hover. What can I do to accomplish this or something that yields the same result?

I was thinking maybe something like this:
$('carousel_ul li a img').hover(function() { $(this).attr('src').find("reg.png").replaceWith("over.png")
   
}, function() { $(this).attr('src').find("over.png").replaceWith("reg.png")
   
});

HTML:
<ul id='carousel_ul'>
                    <li>
                        <a href='#'><img src='image1-reg.png' /></a>
                    </li>
                    <li>
                        <a href='#'><img src='image2-reg.png' /></a>
                    </li>
                    <li>
                        <a href='#'><img src='image3-reg.png' /></a>
                    </li>
</ul>

Any help would be greatly appreciated.