[ic] <select></select> picture

Ryan Hertz interchange-users@interchange.redhat.com
Tue Sep 11 13:20:01 2001


At 02:39 PM 9/11/01 +0100, joachim.richter wrote:
>Hi everybody,
>
>actually somebody asked this before, but I just cannot find it in the list.
>
>We have an article which has lets say 25 different color schemes,
>
>what we would like to is,
>as soon as the customer selects a certain color in the <select> field
>the color (pic) should be shown next to it
>
>the guy who answered this last time has a shop with fishing supply,


You caught me.  (Thanks a lot Birgitt)  :-P


Near the top of my flypage:

<SCRIPT LANGUAGE="Javascript">
<!--
function rollcolor () {
document.pick.src = '/order/images/chart/' + 
document.att.mv_order_color.options[document.att.mv_order_color.selectedInde 
x].value + '.jpg';
}
// -->
</SCRIPT>

This Javascript function changes the image source of the <IMG> tag named 
"pick" to the selection in the form "att" select region named "mv_order_color".


The named form:

<FORM ACTION="[process-target]" METHOD=POST NAME=att>


The select area:

<SELECT NAME="mv_order_color" onChange="rollcolor();"><small>
         [loop arg=[item-field color]]
         <OPTION VALUE="[loop-code]"[perl interpolate=1]if ('[scratch 
lastcolor]' =~ '[loop-code]') {return " SELECTED";} return 
'';[/perl]>[loop-code] - [loop-field description]
         [/loop]</small>
</SELECT>

The perl in the option will select a particular color automatically if the 
customer had already picked that color before.  (I'll let you figure out 
that one..)  :-D  Can't give away ALL my secrets.  You can safely remove 
that code.  The other [loop-code] and [loop-field description] will 
probably be different for you -- in my implementation the data in the color 
field correspond to items in my products.asc.  (Probably not pretty, but 
it's how I make a cross-reference between colors and items)


The image that rotates:

<IMG SRC="/0.gif" NAME="pick" WIDTH=40 HEIGHT=46 BORDER=0 ALT="Your color 
choice">


Finally, near the very bottom of the page:

<SCRIPT>
<!--
rollcolor();
//-->
</SCRIPT>

This will populate the image with the first or default ([scratch 
lastcolor]) image.  I suppose this COULD go into the <body> as a 
OnLoad...  I think I skipped this part because it wouldn't be easy because 
of how I [include] my header.


Live examples:

(A product with color options)
http://yamamoto.baits.com/cgi-bin/order/9-10

(A color with product options -- clicking on one of the products from this 
page will make that color appear as the default selection in the product 
flypage)
http://yamamoto.baits.com/cgi-bin/order/294


Hope this helps,

-Ryan
...evacuated from his offices in Chicago.