What is this feature?

Mason Dixon

New Member
I want to make a website for patio furnishings, I would like to have an image that has an option box next to it and when the viewer clicks a color, certain furnishings on the image turn to that color.

What is that called and how hard is that to do in something like dreamweaver(is that the most generally used website creator still)?

Any tutorials for this?
 

DHDdirect

New Member
It is probably just a generic image rollover although you'll have to be handy with photoshop to create the color changes on the different images.

So you can first search for changing an object color in photoshop, then once you created all your images search for how to create image rollover. I'm sure there are tutorials for them both.

Dreamweaver is still a very popular program. I'd say it's the industry standard.

Hope that helps.. Good Luck
 

notarypublic

New Member
More than just a rollover, I'm sure that he wants for the color change to persist when the user clicks on a color swatch. Here is a gallery I am working on that is similar, but without javascript you can't make clicking on a thumbnail persist (unless you're using separate links for each ones, which seems a mess in the making)
 

Mason Dixon

New Member
I'm envisioning a picture of an outdoor patio scene and the viewer can select if they would like the chairs, tables, etc to all change into a different color at the same time. The background would stay the same but multiple objects would have to change to the selected color and stay that color until the viewer selects a different color.
 

DHDdirect

New Member
Absolutely correct notarypublic.. So what I've stated isn't entirely correct. You can do this with javascript show/hide
 

notarypublic

New Member
Absolutely correct notarypublic.. So what I've stated isn't entirely correct. You can do this with javascript show/hide

It gets messy, though, either way - I have 25 images in my gallery, I couldn't find a script that can handle that many div's without getting bloated..
 

DHDdirect

New Member
Hmm.. Well maybe you can change the image by changing the src with getElementId or you could possibly store the images in a mysql database then use php to to select and retrieve.
 

d a v e

New Member
i was thinking of doing a similar thing a while ago with kayaks colours and, although, i never did it, i think that flash might be a better way.
 

PixelPusher

Super Moderator
Staff member
This isn't too difficult. How I would approach this:

Prep the CSS

  1. Make a class for each color.
  2. Each class (color) will change to the corresponding elements on the page (text color, bg images, etc)

Use Jquery to target and change classes
  1. When a user clicks a color box, use jquery to add a class to all the elements that need adjusting. Use the .addClass() function.
  2. Create a variable that stores that class name
  3. When they click a different color, remove the previous class .removeClass() and then add the new one.

This a rough breakdown, but that's mostly it. Gotta hand it to jquery, makes things some much more simple. :)
 
Top