I need help: Interactive Clothing Model

Hey Everyone!

I hope this is the right place, excuse me if it’s wrong.

A client who we build a website for is a suit hire place and he wants an interactive model that you can try clothes combos, jacket, pants, tie and just the same white shirt.

It doesn’t have to be 3D and it doesn’t have to be able to move. It just needs to have a simple menu on the side where you can select 1 of each of the clothing items.

I wanted everyone’s opinions on how to do this on the smallest possible budget. To give you an idea, I originally quoted him $2000 usd and this was far too much… especially considering the website only cost him about $500 usd.

I first assumed that this would have to be made in flash but maybe there are other ways or already existing scripts that could make this more affordable.

We are looking at around an $800 usd budget, hopefully less and possibly more depending on the functionality.

I need any and all opinions on this, I have to put a quote together in about 2 weeks and not quite sure which way to go.

Thanks!

If it’s just a case of clicking a few buttons to swap a small range of different images then it doesn’t sound too difficult, you should be able to do it in either flash or html as long as you are confident with actionscript/javascript.

Experience has taught me that these type of interactive widgets can grow in complexity very easily when the client leaves out a few ‘small’ details so make sure and get a strict specification before you undercut yourself any further.

You can also achieve this using HTML, CSS and JavaScript


<div id="model">
  <div id="green_shirt" style="display: none;"><img src="green-shirt.jpg" alt="" /></div>
  <div id="red_shirt" style="display: none;"><img src="red-shirt.jpg" alt="" /></div>
  <div id="yellow_shirt"><img src="yellow-shirt.jpg" alt="" /></div>
</div>


#model {
  width: 300px;
  height: 900px;
  background: url('model.jpg') no-repeat;
  position: relative;
}
#green_shirt, #red_shirt, #yellow_shirt {
  position: absolute;
  top: 20px;
  left: 20px;
}

(of course you need to change widths/heights/tops/lefts to suit your needs)

Then you could add some buttons for different shirts such that when the user clicks the red shirt for example, you hide #yellow_shirt and show #red_shirt, when the user then clicks the green shirt you hide #red_shirt and show #green_shirt, etc.