Click to See Complete Forum and Search --> : How do I change images with a dropdown menu?


Swirlyking
01-11-2009, 07:08 PM
Here's a portion of my html. I'm using a google checkout form and I have a dropdown menu with 3 options. When someone uses the dropdown menu I want the "product" image to change depending on what they select in the dropdown menu - currently the default image is Nux_buy_1.jpg, but I also have Nux_buy_5.jpg and Nux_buy_24.jpg.

<td class="style8"><p align="center"><img src="images/Nux_buy_1.jpg" width="350" height="280" id="product" /><br />
</p>
<form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/430266264734591" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm">
<div align="center">
<table cellpadding="5" cellspacing="0" width="1%">
<tr>
<td align="right" width="1%"><select name="item_selection_1">
<option value="1">$4.99 - 1 Bottle (4 doses)</option>
<option value="2">$19.99 - 5 Bottles (Party Pack)</option>
<option value="3">$74.99 - 24 Bottles (Case)</option>
</select>
<input name="item_option_name_1" type="hidden" value="1 Bottle (4 doses)"/>
<input name="item_option_price_1" type="hidden" value="4.99"/>
<input name="item_option_description_1" type="hidden" value=""/>
<input name="item_option_quantity_1" type="hidden" value="1"/>
<input name="item_option_currency_1" type="hidden" value="USD"/>
<input name="item_option_name_2" type="hidden" value="5 Bottles (Party Pack)"/>
<input name="item_option_price_2" type="hidden" value="19.99"/>
<input name="item_option_description_2" type="hidden" value=""/>
<input name="item_option_quantity_2" type="hidden" value="1"/>
<input name="item_option_currency_2" type="hidden" value="USD"/>
<input name="item_option_name_3" type="hidden" value="24 Bottles (Case)"/>
<input name="item_option_price_3" type="hidden" value="74.99"/>
<input name="item_option_description_3" type="hidden" value=""/>
<input name="item_option_quantity_3" type="hidden" value="1"/>
<input name="item_option_currency_3" type="hidden" value="USD"/> </td>
<td align="left" width="1%"><input alt="" src="https://checkout.google.com/buttons/buy.gif?merchant_id=430266264734591&amp;w=121&amp;h=44&amp;style=white&amp;variant=text&amp;loc=en_US" type="image"/>

Fang
01-12-2009, 05:55 AM
<select name="item_selection_1" onchange="document.getElementById('product').src='Nux_buy_'+this.value+'.jpg';">
This will change the image to: Nux_buy_1.jpg, Nux_buy_2.jpg or Nux_buy_3.jpg.
Change the option values to match the images or rename the images accordingly.