-2

I am working on making a product page for metal address numbers for a website, the number comes in 4 different colors, I want to make it so people can hover over a div that is a certain color, gold, chrome, black or brown, and the image of the number will change accordingly.

Here is an example of it done on a different website: http://www.mailboxes.com/departments/custom-signage/numbers-and-letters/brass-number-6/

I'm not asking how to filter the image to make it change colors, I have the different images for different colors already, I just want to know what the best way to swap out those images are, I know about :hover in CSS, but with 4 different images to switch to that wouldn't work. So I'm assuming jQuery will be required here.

Here's what I've tried:

My HTML:

        <div class="address-numbers">

        <div class="numberzero"></div>

        <h3 class="address-title">4" Brass Number 0</h3>
        <h4 class="product-number">Model# 25-BN4-0</h4>
        <h4 class="address-price"><strong>$4.99</strong></h4>
        <div class="colors">
        <div class="antique"></div>
        <div class="brass"></div>
        <div class="chrome"></div>
        <div class="black"></div>
        </div>

    </div>

My relevant CSS: 

.chrome {

    width: 35px;
    height: 20px;
    float: left;
    background-color: #DBDBDB;
    border: 1px solid black;
    margin-left: 5px;
}

.zero-chrome {

    background-image: url(address_numbers/number5_old.jpg); 
}

.numberzero {

    width: 85px;
    height: 125px;
    background-image: url(address_numbers/taymor0.jpg);
}

And my jQuery:

    $(document).ready(function() {
    $('.chrome').hover(function() {
        $('.numberzero').toggleClass('zero-chrome');
    });
});

What should happen is that when hovering over the .chrome div, the image that is currently set by .numberzero should change when the class .zero-chrome is added to the div via jQuery.

npav42
  • 53
  • 9
  • 1
    please show us what youve tried and explain what went wrong – DevDonkey Nov 21 '14 at 19:35
  • I haven't tried anything yet because I don't know where to start on this, jQuery isn't my strong point, I am guessing the answer would include using .hover(), and target the div containing the original image, but after that I don't know which, is why I am now on StackOverflow asking people who know. – npav42 Nov 21 '14 at 19:38
  • 1
    you have some ideas. give them a go and report back – DevDonkey Nov 21 '14 at 19:39
  • Added my code I came up with. – npav42 Nov 21 '14 at 20:34
  • possible duplicate of [How to: Add/Remove Class on mouseOver/mouseOut - JQuery .hover?](http://stackoverflow.com/questions/16821564/how-to-add-remove-class-on-mouseover-mouseout-jquery-hover) – isherwood Nov 21 '14 at 21:10

1 Answers1

1

like this ? Wouldn't normally put the width and height inline but for the sake of ease here

$('#thumbs img').hover(function(event){
  var thisSRC=$(this).attr('src');
  $('#main').attr('src',thisSRC);
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="main" src="http://lorempixel.com/200/100/sports/1">
<div id="thumbs">
  <img src="http://lorempixel.com/output/city-q-c-200-100-1.jpg" width="50"height="50" >
  <img src="http://lorempixel.com/output/city-q-c-200-100-2.jpg" width="50"height="50" >
 </div>
Billy
  • 2,448
  • 1
  • 10
  • 13