JQuery - replace image on hover

Question

I have an images folder. Within this folder, I have several images of two types; one png and one gif. The displayed image is the png version. On an image hover, I need to replace it with its gif version. And when hover is out, put the png version back in place.

I currently have the following which works

$(".image-container").mouseover(function () {
    var imgName = $(this).find('img').attr('src');
    var img2 = imgName.substring(0, imgName.lastIndexOf("."));
    $(this).find('img').attr("src", img2+".gif");
}).mouseout(function () {
    var imgName = $(this).find('img').attr('src');
    var img2 = imgName.substring(0, imgName.lastIndexOf("."));
    $(this).find('img').attr("src", img2+".png");
});

It works, but I dont like the way I am repeating things. Is there any way to make this more efficient?

Thanks

Have a peek at Code Review (but be careful to check their FAQ for what's on topic though). — Jeroen
– Jeroen, Commented Jan 13, 2016 at 13:25
Use css classes instead to change background url - and add/remove class on hover, much cleaner and easier to manage imo — StudioTime
– StudioTime, Commented Jan 13, 2016 at 13:30

Matt · Accepted Answer · 2016-01-13 13:40:25Z

21

I would say, use data-* attributes in a better way. I would suggest you to have something like this:

<img src="img.png" data-src="img.png" data-hover="img.gif" alt="" class="image-container" />

And in the jQuery:

$(".image-container").mouseover(function () {
  $(this).attr('src', $(this).data("hover"));
}).mouseout(function () {
  $(this).attr('src', $(this).data("src"));
});

Or in short, you can also use .replace(). You don't need regex for this simple replacement:

$(".image-container").mouseover(function (e) {    
    $(this).attr("src", $(this).attr("src").replace(".png", ".gif"));
}).mouseout(function (e) {
    $(this).attr("src", $(this).attr("src").replace(".gif", ".png"));
});

edited Jan 13, 2016 at 13:40

Matt

44.1k6 gold badges105 silver badges103 bronze badges

answered Jan 13, 2016 at 13:29

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matt Over a year ago

+1 The first part of this answer is better architecture in general. The less magic assumptions in your code, the better.

Praveen Kumar Purushothaman Over a year ago

@Matt Thanks buddy. :) And you were lightning fast and votes were too, before I answered. I got a stupid phone call. LoL.

Praveen Kumar Purushothaman Over a year ago

@Matt Oh! How stupid of me to miss that! Thanks for the edit.

Community · Accepted Answer · 2017-05-23 12:31:22Z

8

If you expand your selector to include img you can just use $(this) to reference it. And if you're just replacing gif with png (and vice-versa), it is easy to do that with regex.

$(".image-container img").mouseover(function (e) {    
    $(this).attr('src', $(this).attr('src').replace(/\.png$/, '.gif'));
}).mouseout(function (e) {
    $(this).attr('src', $(this).attr('src').replace(/\.gif$/, '.png'));
});

Edit: Please also see Praveen Kumar's answer as well for a great suggestion of declaring filenames in data- attributes.

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Jan 13, 2016 at 13:28

Matt

44.1k6 gold badges105 silver badges103 bronze badges

Comments

guest271314 · Accepted Answer · 2016-01-13 13:43:45Z

1

Use css :hover

.image-container {
  display:block;
  width: 50px;
  height: 50px;
  background: url(http://lorempixel.com/50/50/nature)
              , url(http://lorempixel.com/50/50/cats);
  background-size: 100% 100%, 0% 0%;
}

.image-container:hover {
  background-size: 0% 0%, 100% 100%;
}

<div class="image-container"></div>

edited Jan 13, 2016 at 13:43

answered Jan 13, 2016 at 13:34

guest271314

1

Comments

choz · Accepted Answer · 2016-01-13 14:05:15Z

Just another solution,

You can also use event handler delegation and pass parameters to it.

E.g.

function replaceImageHandler(ev)
{
    var $img = $(this).find('img');
    var imgSrc = $img.attr('src');
    var toImg = imgSrc.substring(0, imgSrc.lastIndexOf(".")) + '.' + ev.data.ext;
    $img.attr('src', toImg)
}

$(".image-container")
    .on('mouseover', { ext: 'gif'}, replaceImageHandler)
    .on('mouseout', { ext: 'png'}, replaceImageHandler);

You can also operate this if you want to attach more event handlers.

E.g.

function replaceImageHandler(ev)
{
    var $img = $(this).find('img');
    $img.attr('src', ev.data.src);
}

$(".image-container")
    .on('click', { src: 'zoom-my-image.gif'}, replaceImageHandler)
    .on('mouseover', { src: 'my-image-1.gif'}, replaceImageHandler)
    .on('mouseout', { src: 'my-image-2.png'}, replaceImageHandler);

Raki · Accepted Answer · 2016-01-13 13:30:56Z

-2

better way to implement this through css

.image-container:hover{
    url: imagepath;

  }

answered Jan 13, 2016 at 13:30

Raki

5354 silver badges13 bronze badges

2 Comments

Praveen Kumar Purushothaman Over a year ago

What about dynamic images, say 100 images. And url:? Does it even work?

Praveen Kumar Purushothaman Over a year ago

Man, are you sure you need the wrong answer in here?

Collectives™ on Stack Overflow

JQuery - replace image on hover

5 Answers 5

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related