Web Design Forum  
 
Go Back   Web Design Forum > Web and Graphic Design > Web Design

Reply
 
LinkBack Thread Tools Display Modes
Old 03-22-2011, 06:31 PM   #1
New Member
 
Join Date: Mar 2011
Posts: 2
Default What is this feature?

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?
Mason Dixon is offline   Reply With Quote


Old 03-22-2011, 07:41 PM   #2
Gold Member
 
Join Date: Feb 2011
Location: Australia
Posts: 369
Default

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
__________________
Jason H.
DHDdirect.com
Domains - Hosting - Design
DHDdirect is offline   Reply With Quote
Old 03-22-2011, 07:49 PM   #3
Silver Member
 
notarypublic's Avatar
 
Join Date: Feb 2011
Posts: 191
Default

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)
__________________
http://www.joshualoves.com/
notarypublic is offline   Reply With Quote
Old 03-22-2011, 07:55 PM   #4
New Member
 
Join Date: Mar 2011
Posts: 2
Default

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.
Mason Dixon is offline   Reply With Quote
Old 03-22-2011, 08:32 PM   #5
Gold Member
 
Join Date: Feb 2011
Location: Australia
Posts: 369
Default

Absolutely correct notarypublic.. So what I've stated isn't entirely correct. You can do this with javascript show/hide
DHDdirect is offline   Reply With Quote


Old 03-22-2011, 08:50 PM   #6
Silver Member
 
notarypublic's Avatar
 
Join Date: Feb 2011
Posts: 191
Default

Quote:
Originally Posted by DHDdirect View Post
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..
__________________
http://www.joshualoves.com/
notarypublic is offline   Reply With Quote
Old 03-22-2011, 08:58 PM   #7
Gold Member
 
Join Date: Feb 2011
Location: Australia
Posts: 369
Default

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.
DHDdirect is offline   Reply With Quote
Old 03-22-2011, 09:29 PM   #8
Platinum Member
 
Join Date: Sep 2010
Posts: 509
Default

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.
d a v e is offline   Reply With Quote
Old 03-25-2011, 03:57 PM   #9
Super Moderator
 
Join Date: Oct 2008
Location: Arizona, USA
Posts: 1,053
Default

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.
__________________
John Darling
Graphic / Web Designer
SmarterTools Inc.
(877) 357-6278
www.smartertools.com
PixelPusher is offline   Reply With Quote
Old 03-30-2011, 05:00 AM   #10
New Member
 
Join Date: Mar 2011
Posts: 2
Default

Just google there are lot of tips about photoshop. And pasio furniture? What a coincidence.

teak patio set
robin84 is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On



All times are GMT. The time now is 06:58 PM.


Camera Forum - Computer Forum - Web Design Forum

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2012, vBulletin Solutions, Inc.
Content Relevant URLs by vBSEO 3.6.0 ©2011, Crawlability, Inc.