Web Design Forums

sotelo24 · 14-11-2006, 02:45

okay i need help on designing a drop down menu that can change an image depending on what option is chosen (its for an online shop)
i visited this website and i basically wanted to do the same thing please visit this link to view exactly what im try to describe:

http://www.tshirthell.com/store/prod...?productid=803

basically it would look something like this:

stickmus · 14-11-2006, 03:06

Do it without javascript first, and then add in support for that later.

sotelo24 · 14-11-2006, 05:05

Can some one help me out and show me step by step how to do this ive been at this for 4 months and i cant mange to solve this..

this is exactly what im trying to do 3 drop down menus and an image and all goes to paypal
http://www.tshirthell.com/store/prod...?productid=803

that is the entire code i have but i just cant manage to redirect and show the image at the same time? where am i going wrong???

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link type="text/css" rel="stylesheet" href="/style.css">
<title>Guandajon Clothing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a:link {
	color: #00FF33;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #00CC33;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.style5 {
	color: #00CC00;
	font-weight: bold;
}
.style7 {font-family: "Swatch it"}
-->
</style>
</head>
<script language="javascript">
function showimage()
{
if (!document.images)
return
document.images.Picture.src=
document.mygallery.Picture.options[document.mygallery.Picture.selectedIndex].value
}
</script>
<body>
<div align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
           codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
           width="745" height="171">
          <param name="movie" value="../../flash/menu.swf">
          <param name="quality" value="high">

          <param name="menu" value="false">
          
          <!--[if !IE]> <--><object data="../../flash/menu.swf"
            width="745" height="171" type="application/x-shockwave-flash">
            <param name="quality" value="high">
            <param name="menu" value="false">
            <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
            <embed src="../../flash/menu.swf" width="745" height="171" quality="high" menu="false" pluginurl="http://www.macromedia.com/go/getflashplayer"></embed>
    FAIL (the browser should render some flash content, not this).</object>
         
        </object></div>

		
<table width="745" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td valign="top" width="250" height="100%"><table width="100%" height="884%"  border="0" cellpadding="0" cellspacing="0"  style="height:100%; background:#242424 url(../../images/2_bot.jpg) no-repeat bottom left; ">
      <tr>
        <td valign="top" style="background:#030303 " height="209"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
           codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
           width="247" height="209">
            <param name="movie" value="../../flash/head.swf">
            <param name="quality" value="high">
            <param name="menu" value="false">
            <!--[if !IE]> <-->

            <object data="../../flash/head.swf"
            width="247" height="209" type="application/x-shockwave-flash">
              <param name="quality" value="high">
              <param name="menu" value="false">
              <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
              FAIL (the browser should render some flash content, not this).
            </object>
        </object></td>
      </tr>
      <tr>

        <td height="668" valign="top" style=" background:   url(../ge/2_top.jpg) no-repeat top left; padding-bottom:26px">&nbsp;</td>
      </tr>
    </table></td>
    <td width="496" valign="top" style="background:   url(../../images/2_bot2.jpg) repeat-x bottom left; padding-bottom:20px"> <p><img src="../ge/2_text1.jpg" alt="" width="492" height="44"><FORM action="https://www.paypal.com/cgi-bin/webscr" method="post" name="mygallery" target="paypal">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="webassist.dreamweaver.4_0_1">
<input type="hidden" name="business" value="onlinestore@guandajon.com">
<input type="hidden" name="item_number" value="079">
<input type="hidden" name="item_name" value="Girls Fleese">
<input type="hidden" name="amount" value="10.00">
<input type="hidden" name="currency_code" value="USD">

<input type="hidden" name="receiver_email" value="onlinestore@guandajon.com">
<input type="hidden" name="mrb" value="R-3WH47588B4505740X">
<input type="hidden" name="pal" value="ANNSXSLJLYR2A">
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="0">

	<img src="../ge/2_product_07.jpg" width="492" height="19">
    </p>
      <p>&nbsp;</p>
      <table height="481" border="0" align="center" cellpadding="0" cellspacing="0" id="200">
<tr>
  <td width="471">&nbsp;</td>

</tr>
<center><tr>
<td width="471"><p align="center">  
  <p align="center">
	<img src="../ge/thumbnail_ge.gif" name="pictures" width="318"
height="178" class="style7">  
  
     <center> 
     <input  type="hidden" value="Style">
    <select name="on0" size="1" onChange="showimage();">
      <option selected value"">Select Style</option>
      <option value=" ">Women</option>
   <option value="est20.gif">Sheer Jersey Ringer</option>

            <option value="est10.jpg">3/4 Sleeve Fitted</option>
            <option value="est7.gif">Rib Fitted Tank</option>
            <option value="est4.jpg">Cap Sleeve Fitted</option>
            <option value="est6.jpg">Camisole</option>
            <option value="est5.jpg">Sheer Jersey Tee</option>
            <option value="est11.jpg">Baby Doll Tee</option>

            <option value=" ">Mens</option>
            <option value="est19.jpg">Baseball ¾ Sleeve</option>
            <option value="est38.jpg">Ringer Tee</option>
            <option value="est39.jpg">Adult Tee</option>
              </select>
	      <input type="hidden" value="Color">
	      <select name="picture, os0" size="1" onChange="showimage();">

            <option value=" " selected>Select Color</option>
			<option value="est10.jpg">Adult Tee</option>
          </select>
    <input type="hidden" name="on1" value="Size">
<select name="os1" size="1" onChange="showimage();">
  <option value=" " selected>Select Size</option>
</select>
  
 <input type="image" name="submit" src="http://images.paypal.com/images/x-click-but22.gif" border="0"><p>

  </form></td>
</tr>
</table>
</table>
</ceneter>
<table width="745" border="0" cellspacing="0" cellpadding="0" align="center" style="margin-top:2px; background:   url(../../images/bot.jpg) top left no-repeat ">
  <tr>
    <td valign="top" width="516" height="112"><div class="bot">Copyright &copy; 2006 Guandajon Inc. <br>
        <a href="../../index-2.php">Privacy policy</a></div></td>

  </tr>
</table>
</body>
</html>

this is just the drop down menu code this is where i need onChange= showimage, redirect

Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="javascript">
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
</script>
<body>

<FORM action="https://www.paypal.com/cgi-bin/webscr" method="post" name="mygallery" target="paypal">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="webassist.dreamweaver.4_0_1">
<input type="hidden" name="business" value="onlinestore@guandajon.com">
<input type="hidden" name="item_number" value="079">
<input type="hidden" name="item_name" value="Girls Fleese">
<input type="hidden" name="amount" value="10.00">
<input type="hidden" name="currency_code" value="USD">

<input type="hidden" name="receiver_email" value="onlinestore@guandajon.com">
<input type="hidden" name="mrb" value="R-3WH47588B4505740X">
<input type="hidden" name="pal" value="ANNSXSLJLYR2A">
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="0">

	<img src="../ge/2_product_07.jpg" width="492" height="19">
    </p>
      <p>&nbsp;</p>
      <table height="481" border="0" align="center" cellpadding="0" cellspacing="0" id="200">
<tr>
  <td width="471">&nbsp;</td>

</tr>
<center><tr>
<td width="471"><p align="center">  
  <p align="center">
	<img src="../ge/thumbnail_ge.gif" name="pictures" width="318"
height="178" class="style7">  
  
     <center> 
     <input  type="hidden" value="Style">
    <select name="on0" size="1" onChange="showimage();">
      <option selected value"">Select Style</option>
      <option value=" ">Women</option>
   <option value="est20.gif">Sheer Jersey Ringer</option>

            <option value="est10.jpg">3/4 Sleeve Fitted</option>
            <option value="est7.gif">Rib Fitted Tank</option>
            <option value="est4.jpg">Cap Sleeve Fitted</option>
            <option value="est6.jpg">Camisole</option>
            <option value="est5.jpg">Sheer Jersey Tee</option>
            <option value="est11.jpg">Baby Doll Tee</option>

            <option value=" ">Mens</option>
            <option value="est19.jpg">Baseball ¾ Sleeve</option>
            <option value="est38.jpg">Ringer Tee</option>
            <option value="est39.jpg">Adult Tee</option>
              </select>
	      <input type="hidden" value="Color">
	      <select name="picture, os0" size="1" onChange="showimage();">

            <option value=" " selected>Select Color</option>
			<option value="est10.jpg">Adult Tee</option>
          </select>
    <input type="hidden" name="on1" value="Size">
<select name="os1" size="1" onChange="showimage();">
  <option value=" " selected>Select Size</option>
</select>
  
 <input type="image" name="submit" src="http://images.paypal.com/images/x-click-but22.gif" border="0"><p>

  </form></td>
</tr>
</table>
</table>
</ceneter>
</body>
</html>

sotelo24 · 14-11-2006, 05:08

Quote:

Originally Posted by stickmus

Do it without javascript first, and then add in support for that later.

but wouldn't i have to redirect each option to a certain drop down box can you describe to me step by step plz. ive completely gave up and don't know what else to do.. thanks

stickmus · 14-11-2006, 08:15

Do you know php/asp?

sotelo24 · 14-11-2006, 12:00

not really i only know the basic.

sotelo24 · 15-11-2006, 06:15

Or can someone direct me somewhere to where i can familiarize myself with this code.
thank you

14-11-2006, 02:45	#1 (permalink)
sotelo24 Registered User Join Date: Nov 2006 Posts: 18	Javascript 3 drop down boxes..PLZ help okay i need help on designing a drop down menu that can change an image depending on what option is chosen (its for an online shop) i visited this website and i basically wanted to do the same thing please visit this link to view exactly what im try to describe: http://www.tshirthell.com/store/prod...?productid=803 basically it would look something like this:

14-11-2006, 03:06	#2 (permalink)
stickmus hmmm... Join Date: Jan 2004 Location: Yorkuk Posts: 2,130	Do it without javascript first, and then add in support for that later. __________________ George Smith - a vain attempt to get higher on google for my name

14-11-2006, 08:15	#5 (permalink)
stickmus hmmm... Join Date: Jan 2004 Location: Yorkuk Posts: 2,130	Do you know php/asp? __________________ George Smith - a vain attempt to get higher on google for my name

14-11-2006, 12:00	#6 (permalink)
sotelo24 Registered User Join Date: Nov 2006 Posts: 18	not really i only know the basic. Last edited by sotelo24 : 14-11-2006 at 17:03.

15-11-2006, 06:15	#7 (permalink)
sotelo24 Registered User Join Date: Nov 2006 Posts: 18	Or can someone direct me somewhere to where i can familiarize myself with this code. thank you Last edited by sotelo24 : 15-11-2006 at 06:30.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search