How to alter images with JavaScript?

I wanted to build a JS applet for a user to customize his product color before ordering.

An example can be seen here - http://www.lunacommerce.com/diy-ipone4-parts.php

I was unable to find the JS code i开发者_Python百科n the page. Can anyone guide on how to go about to build this applet? I have a basic level knowledge of JS but I'm ready to learn whatever is required for building this.

---

This is done by putting together the phone by many small images as parts. For example those are 2 home buttons:

http://www.lunacommerce.com/modules/blocklunatopics/media/base/1300875928.png

http://www.lunacommerce.com/modules/blocklunatopics/media/base/1300875939.png

With JavaScript they just change the images.

---

JavaScript cannot be used to modify client-side images directly (except, maybe some canvas-powered solutions for filters).

Hint: the image on that site could be semi-transparent with a colored backlayer.

---

It's different images being selected, rather than one having its colour changed.

---

First of all, nothing is 'alter' in this 'applet'.

The client side will do an Ajax call each time you select a new color and this ajax call will return an image url from the choosen color.

You need to know: What is an Ajax call and how it works with the server side.

You can check:

http://www.w3schools.com/ajax/default.asp

http://api.jquery.com/jQuery.ajax/

You better read:

http://en.wikipedia.org/wiki/JavaScript

---

If the question is how to modify an image with client side JS, the answer is using canvas, https://developer.mozilla.org/en/Canvas_tutorial/Using_images. You can render an image in it and modify it to your liking, then you can use

var strDataURI = canvas.toDataURL(); 
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

You can then send that to the server or open a new page with it