How to create a big image from small images and change them dynamically using javascript

Question

I'm planning to create a website that lists a certain product ( eg a pc mouse ) where you can design your own given a set of parameters. In this case you can change the color of the mouse, the design of the mouse wheel, maybe a different look for the left and right buttons etc. The problem i'm running into is to implement it in a way that when for example, in a collection of mouse wheel designs, I click a certain mouse wheel design and the main mouse image's mouse wheel will be changed to the selected mouse wheel. I really have no idea how to do this ( js, html5 canvas? ). can anyone point me to a certain tool or maybe a technique on doing this? i've been searching google for a while now and still haven't have the slightest idea on how to do this. Thank you in advance and have a good day.

Answer 1

I think you may need to pre-design those pictures. Let's say you have a mouse picture. And the user can choose to change its color (red, yellow & pink). Then, you will need to have 3 other pictures of the mouse in red, yellow & pink color. Then, using Javascript to change the image src. For example:

function ChangeColor(myColor) {
    var pic = document.getElementById("my_pic");
    if (myColor = "red")
        pic.src = "original_red.png";
    else if (myColor == "pink")
        pic.src = "original_pink.png";
    else 
        pic.src = "original_yellow.png";
} 

Html

<img id="my_pic" src="original.png" alt=""><br><br><br>
<button onclick="ChangeColor('\'red\'');">Red</button>
<button onclick="ChangeColor('\'pink\'');">Pink</button>
<button onclick="ChangeColor('\'yellow\'');">Yellow</button>

Is that what you want?