Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #189095
    npav
    Participant

    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.

    #189097
    Paulie_D
    Member

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

    #189100
    npav
    Participant

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

    #189106
    npav
    Participant

    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");

    #198914
    rlewis2015
    Participant

    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

    #198925
    Shikkediel
    Participant

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

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

    #198942
    Shikkediel
    Participant

    For future reference :

    Anonymised pen

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.