Designing Color Customizer

I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.

Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.

I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://ift.tt/1S3Ylao to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.

As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.

The three main parts I'm addressing:

1. Using HTML buttons to load a different bike part (essentially load a separate image file).

2. Adding the color from the jscolor picker to the image of the selected part.

3. Saving the state of the part when the user clicks a Save button.

I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.

Thanks in advance!