My menu contains PNG icons. I am looking to achieve a hover effect where the PNG icon changes to a GIF icon when the user hovers over a menu item. I've attempted the following: jsFiddle
$("#image").mouseenter(function(){
// I can set GIF url here
$(this).attr("src","http://jsfiddle.net/img/logo.png");
});
$("#image").mouseleave(function(){
$(this).attr("src","http://jsfiddle.net/img/logo-white.png");
});
However, I understand this isn't the ideal approach as it would need to be done individually for each menu item. This is my HTML structure:
<ul>
<li>
<a> item 1
<img src="image-path" />
</a>
</li>
<li>
<a> item 2
<img src="image-path" />
</a>
</li>
</ul>
I referred to this question, but it doesn't exactly meet my requirements. I aim to split at the last . or last / in the path.
Currently, the code splits the string at every /:
var data =$("#image").attr("src");
var array = data.split('/');
Question:
The image path I have is: ../images/icon1.png and I want to change it to either of these paths:
../images/icon1.gif or ../images/hover/icon1.gif