Select part of 'src' name and change that part
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.