JQuery - Img Src Change On Hover And On Click

I have an image I created that I now need to turn into a button. There are four different png files depending on what state the button is in: icon1-on.png, icon1-on-hover.png, icon

Solution 1:

You could also do something like this:

$(".sheild_icon")
    .mouseover(function() {
        this.src = this.src.replace('.png', '-hover.png');
    })
    .mouseout(function() {
        this.src = this.src.replace('-hover.png', '.png');
    })
    .click(function() {
        $(this).toggleClass("off");
        if ($(this).hasClass("off")) this.src = this.src.replace(/(.*)-on(.*)/, "$1-off$2");
        else this.src = this.src.replace(/(.*)-off(.*)/, "$1-on$2");
    }
);

Check out the fiddle: http://jsfiddle.net/mifi79/p2pYj/ (note I didn't use real images so you'll have to open the console to see it log the src on each action)

So, based on @TJ and I's little side bar below, I'm going to present this option as one that gives you the best of all worlds- the convenience of jQuery event handlers, the speed of native JS's indexOf method, and the conciseness of my original answer...

$(".sheild_icon")
    .mouseover(function() {
        this.src = this.src.replace('.png', '-hover.png');
    })
    .mouseout(function() {
        this.src = this.src.replace('-hover.png', '.png');
    })
    .click(function() {
        if (this.src.indexOf('-on') > -1) this.src = this.src.replace(/(.*)-on(.*)/, "$1-off$2");
        else this.src = this.src.replace(/(.*)-off(.*)/, "$1-on$2");
    }
);

You can see the demo in this Fiddle: http://jsfiddle.net/mifi79/p2pYj/1/

The only caveat to this would be that if the image were named turn-on-on.png you could get some weird results.

Solution 2:

There are better solutions like adding and removing html classes to your image and using CSS backgrounds. This will make your code simpler and easier to use.
But as long as you requested for jQuery solution, I would use triggers like:

var $img = $(".sheild_icon"); // caching the image object for better performance
$img.on('click', function(e) {
    if (!$img.hasClass('clicked')) {
        $img.addClass('clicked').trigger('classChange');
    }
}).on('mouseover', function() {
    $img.addClass('hovered').trigger('classChange');
}).on('mouseout', function() {
    if ($img.hasClass('hovered')) {
        $img.removeClass('hovered').trigger('classChange');
    }
});
$img.on('classChange', function() {
    if (!$img.hasClass('hovered') && !$img.hasClass('clicked')) // not hovered, not clicked
        $img.attr('src', '../img/icon1-on.png');
    if ($img.hasClass('hovered') && !$img.hasClass('clicked')) // hovered but not clicked
        $img.attr('src', '../img/icon1-on-hover.png');
    if (!$img.hasClass('hovered') && $img.hasClass('clicked')) // clicked but not hovered
        $img.attr('src', '../img/icon1-off.png');
    if ($img.hasClass('hovered') && $img.hasClass('clicked')) // clicked and hovered
        $img.attr('src', '../img/icon1-off-hover.png');
    console.log($img.attr('src'));
});

Solution 3:

$(".sheild_icon").click(function () {
if (this.src.indexOf('on')>0)
     this.src = src.replace('-on.png', '-off.png');
else
     this.src = this.replace('-off.png', '-on.png');
})
$(".sheild_icon").mouseover(function () {
   if (this.src.indexOf('on')>0)
      this.src = this.src.replace('-on.png', '-on-hover.png');
else
      this.src = this.src.replace('-off.png', '-off-hover.png');
}).mouseout(function () {
   if (this.src.indexOf('on')>0)
      this.src = this.src.replace('-on-hover.png', '-on.png');
   else
      this.src = this.src.replace('-off-hover.png', '-off.png');
});

Solution 4:

use

$(this).attr("src",$(this).attr("src").replace("old","new"));

:)