I have a menu with PNG icons. I want when user hover menu item, PNG icon change to GIF icon. i tried this: jsFiddle

$("#image").mouseenter(function(){
    // I can set GIF url here
    $(this).attr("src",".png");
});

$("#image").mouseleave(function(){
    $(this).attr("src",".png");
});

but I know this is not right way. I can not do this for every menu item. this is my HTML:

<ul>
    <li>
        <a> item 1
        <img src="image-path" />
        </a>
    </li>
    <li>
        <a> item 2
        <img src="image-path" />
        </a>
    </li>
</ul>

I followed this question but this is not what I want. I want to split on last . or last / in path.

this code split string on every / character:

var data =$("#image").attr("src");
var array = data.split('/');

Question:

I have this image path: ../images/icon1.png and I want to change it to these paths:

../images/icon1.gif or ../images/hover/icon1.gif

I have a menu with PNG icons. I want when user hover menu item, PNG icon change to GIF icon. i tried this: jsFiddle

$("#image").mouseenter(function(){
    // I can set GIF url here
    $(this).attr("src","http://jsfiddle/img/logo.png");
});

$("#image").mouseleave(function(){
    $(this).attr("src","http://jsfiddle/img/logo-white.png");
});

but I know this is not right way. I can not do this for every menu item. this is my HTML:

<ul>
    <li>
        <a> item 1
        <img src="image-path" />
        </a>
    </li>
    <li>
        <a> item 2
        <img src="image-path" />
        </a>
    </li>
</ul>

I followed this question but this is not what I want. I want to split on last . or last / in path.

this code split string on every / character:

var data =$("#image").attr("src");
var array = data.split('/');

Question:

I have this image path: ../images/icon1.png and I want to change it to these paths:

../images/icon1.gif or ../images/hover/icon1.gif

• javascript
• jquery
• html
• css
• split

• 3 Do this with CSS and sprites preferably. JS is overkill and actually provides a worse user experience (image flicker as the secondary one loads) – ahren Commented Oct 22, 2013 at 7:05
• I have many menu item and special icon for each one. – Mohsen Safari Commented Oct 22, 2013 at 7:07
• Or you could use a simple javascript replace. – ericosg Commented Oct 22, 2013 at 7:08
• 1 Even if I had 10,000 menu items all with images and icons, I would still use CSS. You're slowing down the performance if you're adding so many event handlers as well. Use a script to generate the required CSS if you find it's too much manual work. – ahren Commented Oct 22, 2013 at 7:10
• 1 so then $(this).attr("src", $(this).attr("src").replace('.png', '.gif')); – ericosg Commented Oct 22, 2013 at 7:19

6 Answers 6

Try

$('ul img').hover(function (e) {
    $(this).attr('src', function (idx, src) {
        return src.replace(/(.)(png|gif)$/i, '.' + (e.type == 'mouseenter' ? 'gif': 'png'))
    })
})

Demo: Fiddle

There is no need of js for this.

it can be done simply using css.

image{background-image:url(../images/icon.png);}
image:hover{background-image:url(../images/icon1.png);}

Just trim off the last three characters:

var oldSrc = this.src;
this.src = oldSrc.substr(0,oldSrc.length-3)+"png";
// or +"gif" to change to the GIF image.

Did this do the trick ?

$(this).attr('src', 'http://jsfiddle/img/logo-white.png'); 

Hiral is correct, you do not need JS for this.

Try the following:

.icon {
    width: 32px; /* Replace with your own */
    height: 32px; /* Replace with your own */
}
.icon-house {
    background-image:url(../images/icon-house.png);
}
.icon-house:hover {
    background-image:url(../images/icon-house-hover.png);
}
.icon-car {
    background-image:url(../images/icon-car.png);
}
.icon-car:hover {
    background-image:url(../images/icon-car-hover.png);
}
/* etc... */

And change your HTML to something like this:

<ul>
    <li>
        <a href="index.html">Home
        <span class="icon icon-house"></span>
        </a>
    </li>
    <li>
        <a href="carsrock.html">Cars are awesome!
        <span class="icon icon-car"></span>
        </a>
    </li>
</ul>

Alternatively, you can use a spritesheet, which would save time for your users as well, as they would not need to download many separate small images.

This article is relevant: http://css-tricks./css-sprites/

You can use regular expression to replace the path:

var newSrc = $(this).attr("src").replace(/\.png$/, ".gif");
$(this).attr("src", newSrc);