what do I need to do to change convert a part of image to another

[hno]

HI

I'm thinking to do something like this , I've seen this in a website ,I'm a php designer but i don't know who something like this can be done .

it's a website that sells sofas . we've the ability to change the color and fabric and see the result right away .

for example ,this is the default sofa :

 

then I can select a part of it and I can choose the fabric and color , then it make the result :

 

thats it , How can I do that ? What should I do ?

 

I'm really looking to hear from you

King Regards

 

[mik_se7]

I believe its done using a process called image mapping here is a link that might get you started http://www.makeuseof.com/tag/create-image-map-gimp/ gimp is a free image software you can download.

 

this website suggests using other programs to slice the image and assign each part different URL's http://www.htmlgoodies.com/beyond/css/how-to-create-image-maps-with-html-and-css.html

[hno]

 

I believe its done using a process called image mapping here is a link that might get you started http://www.makeuseof.com/tag/create-image-map-gimp/ gimp is a free image software you can download.

 

this website suggests using other programs to slice the image and assign each part different URL's http://www.htmlgoodies.com/beyond/css/how-to-create-image-maps-with-html-and-css.html

 

 

thansk for reply

I misunderstand it ,the way you said , is it changing the whole image and put another image instead ?I don't thing it does that ,because there is no way they can have 30 different colors and 30 different fabrics for each sofa !!

 

I think it somehow convert the default part to a custom style .

 

is there anyway to do that ?

 

Thanks

[mik_se7]

I'm sorry i do not know much about this subject only that image mapping was a way to manipulate images, have you tried to look at the source code of the website with the sofas?

most browsers you right click on the background and chose view source.

[Barand]

Changing the colour of an area is easy, you just create a mask of the area to be changed. Patterns are much trickier, especially in this situation, as you would have to take scale and perspective into consideration also.

[hno]

 

Changing the colour of an area is easy, you just create a mask of the area to be changed. Patterns are much trickier, especially in this situation, as you would have to take scale and perspective into consideration also.

 

 

Thansk for reply

I checked the website . every part that I click is an area , this is the code :

 

<area shape="poly" coords="149,143,184,148,202,153,271,164,272,166,257,197,252,204,247,212,249,219,261,226,271,228,278,227,279,235,299,247,297,284,275,294,259,290,147,250,145,240,145,220,147,217,163,210,195,201,193,198,156,188,149,186,90,171,88,160,89,151,93,149,116,145" href="#" onclick="Patro(2);return false;">

 

these coords , define a shape of the sofa , so when I click on it , it calls a function .

 

The thing is ,I don't think so it has all different colors and fabrics pictures for each sofa .I mean there is no way to do that !! , just think about a sofa with 30 different fabrics and 10 different colors , is it possible to have all these images that I can replace them ?!!

 

I think , somehow like photoshop ,it changes the style online .

 

I really appreciate your help

Thanks