Create site feature showing same product in multiple colors?

[alston]

Hello, this may it may not be a css function, but I’m wondering how to make a site, such as a car company site where you can view an image of the car and select the exterior/interior colors and the car visual updates automatically based on the colors selected.

Is this a flash based function or is it something that can be accomplished via css?

[shaneisme]

The easiest way to do it would be to us JavaScript to swap the images around, or do something more simple and add/remove classes letting CSS control what’s shown.

If you were to choose jQuery (which might be a good place to start as a beginner), they have something baked in called toggle().

http://api.jquery.com/toggle/

Now, toggle() isn’t very customizable. Instead, I have a script I wrote that’s somewhat crude, but it handles any sort of “tabbed” content. That can be taken literally, like the tabs that switch from one page to the next, or something less obvious.

I’m not sure if this is kosher or not, but I recently did something similar to what you’re asking for here at work: http://www.asus.com/us/site/tablets/memopad/#design where you can select different colors of a tablet.

If you review the markup, it’s dead simple to see how things relate. I’m sorry to say it’s not very good in a non-JS environment – maybe a future version :)

I’m afraid I don’t have time to write up a proper tutorial, but if you wanted to review code:

SASS: https://github.com/ASUS-US/ASUS-Framework/blob/master/src/sass/framework/modules/tabbed-content.scss
JS with jQuery dependency: https://github.com/ASUS-US/ASUS-Framework/blob/master/src/js/framework/tabbed-content.js

[nixnerd]

What you’re asking is really complicated. The HARDEST part will be how you handle the artwork. It is possible to start with a photo of a WHITE car… no other color will do and then add color by laying a semi-transparent layer of color over it.

See here:

http://stackoverflow.com/questions/9303757/how-to-change-color-of-an-image-using-jquery

But this requires that you obtain high-qaulity images of white cars.

[Author]

Posts