Changing an photo's RGB value on mouse click

Forum Moderators: phranque

Message Too Old, No Replies

Changing an photo's RGB value on mouse click

Karma

8:37 am on Apr 27, 2010 (gmt 0)

One of my customers sells a range of products (bags for example) that are available in a number of colours.

I've seen websites before that have a photo of the product and underneath, icons representing the products available colour.

Clicking these colour icons/swatches change the product photo's RGB values, to give the visitor a rough idea what the product would look like in a different colour.

Does anyone know how to do this?

phranque

9:44 am on Apr 27, 2010 (gmt 0)

i would imagine you could use the onclick event to change the image displayed.

this would probably be a good place to use a css sprite.

kaled

1:41 pm on Apr 27, 2010 (gmt 0)

I've seen this once or twice. I assume multiple images are used that are generated offline using image-editing software. I doubt javascript is used to edit the image but perhaps it could be done on the server - there are some quite sophisticated libraries available for perl, etc.

Kaled.

Karma

2:02 pm on Apr 27, 2010 (gmt 0)

Since I posted this I found a couple of examples and like you say, they are individual images with a simple java-script swap image script.

rocknbil

7:05 pm on Apr 27, 2010 (gmt 0)

For a controlled set, yes, JS and multiple images is fine, but for a true dynamic solution using sliders or similar, two ways I know of: Flash and using a server-side image generation program. I know this can be done with ImageMagick but not sure about the GD toolkit.