Because I'm going to offer 2 or 3 different style of paper, I want the customer to be able to choose and see the paper they are buying. My initial idea was to just have the 3 styles on the page - job done.

Then I thought how cool it would be to have the image swap based on the option chosen. So…I set out to code it up.

Step 1 was to create the images - easy, just make a scan of the different paper types then save them all to the same size.

Step 2 is to create a fixed size div to display one of the paper images, with an overflow set to hidden.

< div id="paperContainer">
< img src="images/scroll.gif" width="300" height="400" />
< img src="images/marble.gif" width="300" height="400" />
< img src="images/heraldic.gif" width="300" height="400" />


#paperContainer {width: 315px; height: 400px; overflow: hidden;}

Step 3 is to create the options for the customer to choose;

< p>Which Paper to print on?< /b>
< br />< input type="radio" name="paper" value="scroll" checked > Scroll
< br />< input type="radio" name="paper" value="marble" > Ivory Marbled
< br />< input type="radio" name="paper" value="heraldic" > Heraldic

Step 4 is the hardest part. Linking the chosen option to show the relevant image! But a small piece of jQuery like this does the trick;

$("input:radio[name='paper']").click(function() {
var show = $(this).attr("value");
$("#paperContainer").html('');
});

Basically I am using the value attribute to change the image, based on the option chosen. Isn't jQuery great?

And that's about it for the image swapping! Any questions lol