How to change image on hover of a different div jQuery.

[npav]

I’m working on a product page that shows metal address letters that come in 4 different colors, I’ve set up 4 small divs below the letter image that are the colors available. When people hover over the divs I want to switch the image to the one with the right color, basically it’s the same as the feature on any Amazon product page where when you hover over a small image on the side and the large feature image changes to match.

Here is another example of it in action: http://www.mailboxes.com/departments/custom-signage/numbers-and-letters/brass-number-6/

I already have the images in different colors, just need a way to swap them out, there are 4 colors for each number and 10 available numbers (0-9) so I can’t just use :hover unfortunately.

[Paulie_D]

Sounds to me like something tailor made for data-attributes or a sprite even

[npav]

I’ll take a look into data-attributes, thanks!

[npav]

UPDATE: Figured it out, I’ll post my jQuery incase anyone else is looking to do something like this.

$(document).ready(function(){
$(".div").hover(function() {
$( '.img-class' ).attr("src","new-img.png");
}, function() {
});
</code

Just apply a class to your image tag and target it in your jQuery, on .hover of the div specified on line 2 the src attribute of your img will be changed to the new one, if you want to switch it back to your old img when your mouse leaves the div just add this code below the last function().

$( '.div' ).attr("src","old-img.png");


[rlewis2015]

Anyone have a Codepen for how to get this fully working? I’m looking for an example of how to do the Product Image changing on colored thumbnail like on this page: http://www.mailboxes.com/departments/custom-signage/numbers-and-letters/brass-number-6/

thanks

[Shikkediel]

Here’s one (there’s different approaches) to get an idea :

http://codepen.io/Shikkediel/pen/ByMwqV

[Shikkediel]

For future reference :

Anonymised pen

[Author]

Posts