Results 1 to 5 of 5

Thread: Dynamicly changing image from form components

  1. #1

    Dynamicly changing image from form components

    Hello everybody, I have come here because I can not find any tutorial on what I am trying to do because I am not sure what the technique is called that I need.
    Basically, I am designing an e-commerce site, but instead of selling many different products, I am selling one, Shoes. You see, they are customizable, so I only will build one page to customize them that has:
    a picture of a blank shoe, a picture of laces, and a picture of a little charm on the laces, with three drop down boxes; color, laces, and charms. Basically I want it so that when you chose a color from the drop down, the picture of the blank shoe changes to that color. Sounds simple, but I do not even know what programming language I can do this with, or how to set it up. Do I need all the possible images it can be, or are there properties I could use like in Flash, where I can change the color property? I imagine this is a very involved job, and I only know a little bit of everything, I am really a designer so I am totally lost here. Can someone please point me in the right direction of what language I could use, or a tutorial, or even what you call this technique?
    The thing is, I will be connecting it to a database which will contain the number of shoes left that color, the number of laces, and number of little charms I put on the laces. When someone chooses the shoe they want, and then proceeds to checkout, I need that info sent to me so that I can make the shoe. My host has mySql and PHP so I am wondering if this is an option, and how would I get started? Here is a graphic example of what I mean
    http://www.the-best-broker.com/shoe.html
    So basically, I have drop downs that should
    1: change the image to match what is chosen, and
    2: send that info to me in an email or into the database, either one.
    The best example I have is of a car website, like toyota.com, where you choose your options and color and depending on what you choose, the picture of the car changes. And obviously toyota gets that information so they can build that car for you, but when I look at that source, it seems like javascript code defined somewhere else, so there is no example for me to look through. How can I start this? I have been using this site for years and have never needed to post my own thread because I just read through all of them, but I just cant seem to find info on this topic. If anyone knows what this is called, or has done something similar in the past, please help me out. Thanks so much.

  2. #2
    By far the easiest way to do this is to have a copy of each combination available. The next easiest would be to have a copy of each piece and then composite the pieces together into a final image.

    The first way is a lot of grunt work to create all the images, but the web page can be written as simple HTML with some JavaScript to swap the images.

    The 2nd way can be done with PHP and some image processing libraries (it comes with one called GD), or you could do the compositing in Flash. If you put all the different piece images into the Flash file's library, you'll end up with a pretty large SWF, so you'd probably want to load the necessary pieces at runtime. This will require some Actionscript skills.

    Hope that helps

  3. #3

    Afrostyle

    <P>
    Quote Originally Posted by mbeards View Post
    By far the easiest way to do this is to have a copy of each combination available. The next easiest would be to have a copy of each piece and then composite the pieces together into a final image.</P>
    <P>The first way is a lot of grunt work to create all the images, but the web page can be written as simple HTML with some JavaScript to swap the images.</P>
    <P>The 2nd way can be done with PHP and some image processing libraries (it comes with one called GD), or you could do the compositing in Flash. If you put all the different piece images into the Flash file's library, you'll end up with a pretty large SWF, so you'd probably want to load the necessary pieces at runtime. This will require some Actionscript skills.</P>
    <P>Hope that helps
    </P>
    <P>Hi Mbeards, thank you for the fast reply. Could you possibly help me with a few more questions? I have three styles, Olympic, Filligree, and Plastic, 8 colors: </P>
    <P>White, Black, Clear, Glow-In-The-Dark,Purple, Pink, Light Blue, and Green, and 8 different charms. Do you know if I use that formula, I forget the name, but it is something like, I have 15 choices, so 15 x 14 x 13 x 12 x 11 x 10 x 9 x 8 x 7 x 6 x 5 x 4 x 3 x 2 x 1 which equals 1,307,674,368,000 different images? I really dont think I can make 1 billion different images. I can however have the image split in 3 sections all three sections having to be the same color shoe, the middle section to be the laces, and the bottom section to be the charms. That way I would just need 8 pictures of the charms, and when someone selects one, it would place that image over the colored shoe. Is that what an image processing library is? Do you know of any tutorials that can help me with this, or does anyone know somebody that i could perhaps contract out to help me with this? I would like to have this done before march. If anyone can help me with a car-like web page where you customize the different pieces of the product and then send that info to a database for credit card processing and manufacturing information then please respond to this thread or email me at <A href="mailto:llepore12129@hotmail.com"><U><FONT color=#0000ff>llepore12129@hotmail.com</U></FONT></A> It cannot be in Flash, or else I could figure that out, it needs to be done in a way were the user does not need to download any plugins. If there is know way around this i rather use JavaScript, even though I guess most people do have flash player now and days. So if you can help I am all ears, and if you think you can build it, I will hire you. Thanks again mbeard for the ideas i am researching GD now.</P><FONT size=2></FONT>

  4. #4
    You're confusing permutations with combinations. Permutations take into account order, combinations don't.

    Olympic/Black/Charm #3 and Black/Olympic/Charm #3 are 2 different permutations, but they're the same combination.

    Math lesson over

    Using 24 colored shoe images with 8 charm image overlays is probably the way to go. This can be solved with JavaScript and layered DIVs in HTML, in Flash using layers and symbols, and using an image processing library to composite the image pieces together into a new single image. Which solution you choose probably depends on your relative experience/comfort with Dynamic HTML, Flash, and programming.

    I'll email you privately for more detailed help.

  5. #5
    Quote Originally Posted by mbeards View Post
    You're confusing permutations with combinations. Permutations take into account order, combinations don't.

    Olympic/Black/Charm #3 and Black/Olympic/Charm #3 are 2 different permutations, but they're the same combination.

    Math lesson over

    Using 24 colored shoe images with 8 charm image overlays is probably the way to go. This can be solved with JavaScript and layered DIVs in HTML, in Flash using layers and symbols, and using an image processing library to composite the image pieces together into a new single image. Which solution you choose probably depends on your relative experience/comfort with Dynamic HTML, Flash, and programming.

    I'll email you privately for more detailed help.
    hey mbeard, if you are still on the forums I emailed you with my contact info, im here for the rest of the day now, so if you get a chance contact me.
    Cheers,
    Lou Lepore

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012