Replacing an image with another in jquery using classes and IDs

Question

I understand that this question has been answered before, but even after consulting those links, I am still unable to solve my problem. I want to replace my image (assets/img/social-mail.jpg) to another (assets/img/social-mail-hover.jpg), with a single class, because I have multiple images I would like to do this to. My basic thought process is this: When the class is hovered, take the ID, and replace its image with another by adding "-hover" to its image link.

HTML:

<img id="social-mail" class="box-social" src="assets/img/social-mail.jpg">

JS:

$(".box-social").hover(function(e) {
    var id = $(this).attr("id");
    var icon = id.split("-")[1];
    var image = "img/social-" + icon + "-hover.jpg";
    $(id).find("img").attr("src", image);
});

I've tested id, icon, and image; and they all give me exactly what I want. However, when I hover over the image, it still isn't being replaced. I'm not getting any errors either. What am I doing wrong? Thank you so much!

It would need to be $(this) or $('#'+id) to make it a proper id selector... but use image sprites and CSS for this! — numbers1311407
– numbers1311407, Commented Jan 10, 2015 at 5:18
You mentioned the path as "assets/img/.." but in script you are doing: var image = "img/social-" + icon + "-hover.jpg"; . Are you sure you are not missing "assets" in the path? — K K
– K K, Commented Jan 10, 2015 at 5:19
Why are you using .find()? this already refers to the current img. Don't use .attr() either: this.src = image; should do it. (Also, why are you using .split() to take the part after the hyphen when the part before the hyphen is actually part of the filename anyway? Can't you do it all with one line: this.src = "assets/img/" + this.id + "-hover.jpg";? — nnnnnn
– nnnnnn, Commented Jan 10, 2015 at 5:21
@numbers1311407 just added that, and it didn't work. It works if I purely use CSS with :hover, but I have six images and wanted to try this with JQuery. — Tiffany Qi
– Tiffany Qi, Commented Jan 10, 2015 at 5:23
@nnnnnn has it correct. this is the element, you don't need to find anything. Regardless this is a typical scenario for CSS and a single image sprite that holds all your images. No JS required. — numbers1311407
– numbers1311407, Commented Jan 10, 2015 at 5:24

nnnnnn · Accepted Answer · 2015-01-10 05:34:37Z

2

I think there are at least four problems with your function:

To select by element id you need the # prefix, so $("#" + id) not $(id).
You don't want .find() because this is already the image in question.
Your image path in the html begins with "assets" but you don't include that in your Javascript.
If you only supply one funtion to .hover() that function will be called both when the mouse moves in and when it moves out. So you never change the image back.

The four lines of your function can be replaced with one line:

$(".box-social").hover(function(e) {
  this.src = "assets/img/" + this.id + "-hover.jpg";
});

This fixes problems 1-3 above. To fix problem 4 just supply a second function to change the src back when the mouse leaves:

$(".box-social").hover(function(e) {
  this.src = "assets/img/" + this.id + "-hover.jpg";
}, function(e) {
  this.src = "assets/img/" + this.id + ".jpg";
});

edited Jan 10, 2015 at 5:34

answered Jan 10, 2015 at 5:28

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

1 Comment

Tiffany Qi Over a year ago

Thank you so much for your help! This does indeed solve all my problems; I definitely should have asked about this way earlier.

K K · Accepted Answer · 2015-01-10 05:25:24Z

0

You need to correct your selector. JS:

$(".box-social").hover(function (e) {
    var id = $(this).attr("id");
    var icon = id.split("-")[1];
    var image = "assets/img/social-" + icon + "-hover.jpg"; //make sure the path is correct
    $('#' + id).attr("src", image); //Changed the selector.
});

Demo:http://jsfiddle.net/GCu2D/521/

answered Jan 10, 2015 at 5:25

K K

18.2k4 gold badges33 silver badges39 bronze badges

1 Comment

Tiffany Qi Over a year ago

thank you for your help! I was a bit confused because my js file was in assets, and so I was debating whether to include assets or not. I guess because I was replacing something in my index file, I had to include assets.

angel · Accepted Answer · 2015-01-10 05:29:06Z

0

try this

$(".box-social").hover(function(e) {
    var id = $(this).attr("id");
    var icon = id.split("-")[1];
    var image = "assets/img/social-" + icon + "-hover.jpg";
    $("#"+id).attr("src", image);
});

you forgot "assets/" in your image link and your img selector is not corresct

edited Jan 10, 2015 at 5:29

answered Jan 10, 2015 at 5:23

angel

10412 bronze badges

Collectives™ on Stack Overflow

Replacing an image with another in jquery using classes and IDs

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related