Forums

Blackhawkso

Hey everyone

I'm guessing that what I want to do will use either javascript or jquery, I am building an online catalogue for a company. Some of the products that they sell have different variations (i.e. colour, shape, size etc etc) now in the page that presents the item to the visitor I am showing an image of the item. What I would like to do is have a series of drop down menu's that have the different versions of the product listed and when someone selects let say a different colour I would like the image to change to a different one showing the colour that they have selected but without a full page refresh. How could I go about doing this baring in mind that at the maximum their could be 3 or 4 drop down menu's effecting the image displayed. If it affects it at all, all the details of the products including the filenames of the images are stored in a mySQL database.

Thank you for your time people.

Phil

cnwtx

Yes, it can be done in JS. Here's how to do it with the onclick event:

<script type='text/javascript'>
	intImage = 2;
	function swapImage() {
	switch (intImage) {
	 case 1:
	   document.getElementById("imgswitch").src  = "./path/to/img.jpg"
	   intImage = 2
	   return(false);
	case 2:
	   document.getElementById("imgswitch").src  = "./path/to/img2.jpg"
	   intImage = 1
	   return(false);
	 }
	}
	</script>

I'm not sure how to do it with dropdowns, but I'm sure someone here is.

treehouse : what would you like to learn today?

Forums

Replace image without page reload??