SImple image replace using Javascript/html

Question

Couldn't find a punctual answer for this simple task and your help is highly appreciated

We have an image we want to switch based on user's color selection.

Tried several methods, none worked.

This is the idea:

Answer 1

$('#YourButton').click(function() {
    var oldSrc = 'images/Image1.png';
    var newSrc = 'images/Image2.png';
    $('img[src="' + oldSrc + '"]').attr('src', newSrc);

});

Just change the image source with javascript by clicking your button with another color

Note: it´s jquery so you have to include the js file..

Answer 2

Just bind a click listener to your button and change the src attribute of your image.

$('#colorButton').click( function() { //choose a new color
    $('#imageIcon').attr('src', 'path/to/new/image.png'); //change the img's source
});

EDIT (response to questions): If you want this code to apply to all of your buttons, give each of your buttons a similar class instead of an ID:

<div class="colorButton"></div>

Then you can use the following selector to apply the above click listener to all of these divs:

$('.colorButton')

Naturally, you want to change your image as simply as possible. You could map all of your colors to their corresponding image file, but as far as design goes this might get messy and unwieldy. I would create a directory that stores all of your image files (for example, /your/color/swatches) and give each of them a name consistent with their color, like 'ff0000.png' for red, '0000ff.png' for blue, etc.

Why would we do this? So that we can switch your image based on the background-color attribute of your buttons. Let's say that you have the following buttons:

<div class="colorButton" style="background-color: '#ff0000'"></div>
<div class="colorButton" style="background-color: '#0000ff'"></div>

You can use the same click listener, but it will have to be modified a bit since we are mapping the background color to an image:

$('.colorButton').click( function() {
    var color = $(this).css('backgroundColor');
    //(You'll need to modify your color string here)
    $('#imageIcon').attr('src', 'your/color/swatches/' + color + '.png');
});

BUT this won't work yet. Since most browsers return "rgb(xx, yy, zz)" from .css('backgroundColor'), you need to convert that string into hex. This post on SO gives a more or less effective way to do so, but you'll need to modify it to fit your model where I have indicated.