0

I am developing a website for a client where they offer to powder coat bicycle parts.

What I want is a widget on the site where there is a picture of the bike, they select the appropriate part and using a color widget they select the colour they want and the picture automatically changes.

I have a working test using a large area where I change the background color based on what the user selects from an adjacent color picker. I then have a large PNG as the background image of the div where I have made the part itself transparent with all other areas being white. Therefore when they change the colour the bike part appears to change color.

My problem is that this looks poor, it appears obviously as an outline, I have tried keeping the original part as semi transparent on the PNG and it gives it a bit more definition but the colours end up looking washed out or dark depending on the color they choose.

Is there a better way to do this? I am at the early stages of doing this and therefore don't mind changing to an entirely different approach.

WhoIsLewis
  • 1
  • 1
  • From what you're saying, it sounds like the bike is semi-transparent, and the background div colors it? If so, why not just make a separate image of each color in something like Photoshop, where you can make it look better? Then you can just change the image when a color is clicked. – tjboswell Dec 20 '13 at 13:13
  • Yes you are correct. I could do that but I want the user to be able to select any color they want so don't want to have to make thousands of images – WhoIsLewis Dec 20 '13 at 13:14
  • I guess that makes it a little more complicated.. What if you increase the brightness of the color they pick to make it not as dark? For example, if they pick a grey color (#555) it will change the div to something a bit brighter (#888) that will look better. Just an idea – tjboswell Dec 20 '13 at 13:16
  • Yes I think this is the route I may have to go down. I can spend some time on the covering image adding shadows onto it and a bit of texture. I think this will then look better when the color is changed behind it. – WhoIsLewis Dec 20 '13 at 13:18
  • How about this? http://stackoverflow.com/questions/9303757/how-to-change-color-of-an-image-using-jquery and in general search for "javascript change image color" I think there're solutions out there already – Yuriy Galanter Dec 20 '13 at 15:58

0 Answers0