Image change with options

Image change with options Image

Paste this code into your page using the html tool.
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script src="
js/jquery.magicpreview.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#opt_0").change(function() {
var selObj = document.getElementById('opt_0');
var selIndex = selObj.selectedIndex;
var src = $(this).val();
var sImage = "
productimages/" + selIndex + ".gif";
$("#imageload").html(src ? "<img src='" + sImage + "'>" : "");
});
});
</script>
Now paste this code into your page using the html tool.
Adjust the height and width to your images. 0.gif will be the image that is the default with nothing chosen.
Code can be altered to handle .jpg

<div id="imageload" style="height:100px; width:100px">
<img src="
productimages/0.gif">
</div>

Upload your images to a folder named
productimages inside your shop folder on your server and name your images 0.gif, 1.gif,2.gif,
3.gif, and 4.gif. If you need more just keep adding them and naming them in order 5.gif, 6.gif, and so on.
Now add a folder to your shop folder and name it js. Now download these two js files and unzip them then upload them to your js folder.
jquery-latest.js
jquery.magicpreview.js

Note: S-Drive shopkeepers will have to change link refrences to absolute so they can put the needed files in their storage folder. Add http://mysite.coffeecup.com/storage/ to all the bold links.



Your Price:$0.01
1