/    Sign up×
Community /Pin to ProfileBookmark

How do I change images with a dropdown menu?

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 [b]Nux_buy_1.jpg[/b], but I also have [b]Nux_buy_5.jpg[/b] and [b]Nux_buy_24.jpg[/b].

[code]<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”/> [/code]

to post a comment
HTML

1 Comments(s)

Copy linkTweet thisAlerts:
@FangJan 12.2009 — &lt;select name="item_selection_1" onchange="document.getElementById('product').src='Nux_buy_'+this.value+'.jpg';"&gt;
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.
×

Success!

Help @Swirlyking spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...