Dynamic changing of product image when a radio choice is selected.
In addition a scaled thumbnail of the alternative image is placed against the radio item.

To use this all you need to do is to place the supplementary image name in the choices
HTML for Name field within curly brackets.  E.g.  Blue{widget_blue.jpg}
The popup code and a thumbnail image against the radio button is then created automatically.

Alternatively you can have a small unscaled icon placed against the radio buttons with a
normal single product image.  
To use this all you need to do is to place the icons image name in the choices 
HTML for Name field within square brackets.  E.g.  Blue[widget_blue.jpg]

Updated 04-01-04 to allow for alternative layouts and small non-swapping icons.
Updated 24-12-03 to allow for multiple items per line.

Author Norman Rouxel rouxel@attglobal.net


SETUP


Add the following code to Act_Primary.html (just above the </HEAD> tag).


<SCRIPT LANGUAGE="JavaScript" SRC="dynamicimagesupport.js" TYPE="text/javascript"></SCRIPT>



Make a file in Site1 called dynamicimagesupport.js from the following:-



// START Dynamic Product Images on Radio Buttons
var current = '';
var scaledown;
var colcount;
var colpos;
var textunder;
var buttonunder;
function radioimage(radiohtml, choicename){
   var result = choicename.match(/(.*)\{(.*)\}(.*)/);   		// see if HTML for Name contains {.....}
   if ( result != null )
     {
     var textsep = textunder ? '<br>' : ''; 				// do we want text under button
     scaledown = scaledown - 0;
     var twidth = Math.floor(100 / colcount);
     colpos++;
     if ( isNaN(scaledown) || scaledown < 1 ) scaledown = 4;    	// set a default if bad scaledown
     var cpath = '';
     var curbits = current.match(/(.*\/)(.*)/);				// if we're previewing 
     if ( curbits != null ) cpath = curbits[1];				//  then get path to main image
     var thisimage = result[2];      					// the text within { }
     // add in image substitution code
     radiohtml += ' onClick="document.getElementById(\'' + current + '\').src=\'' + cpath + thisimage + '\'">';
     var thiswidth = Math.floor(iwidth.replace(/WIDTH=(.*)/,"$1") / scaledown);	// the width
     var thisheight = Math.floor(iheight.replace(/HEIGHT=(.*)/,"$1") / scaledown);	// the height
     document.write('<table width="' + twidth + '%" align=left>');		// start a table if appropriate width
     document.write('<tr><td><img src="' + cpath + thisimage 			// first cell with image
                  + '" width=' + thiswidth + ' height=' + thisheight + '>');
     if ( buttonunder )							// where do we want the button text 
       {
       document.write('<br>' + radiohtml + textsep + result[1] + result[3]);	// button under image
       }
     else
       {
       document.write('</td><td width="100%" valign=top>');		// new cell next to image
       document.write(radiohtml + textsep + result[1] + result[3]);     // then radio button and description
       }
     document.write('</td></tr></table>');				// finally end table
     if ( colpos >= colcount ) 
       {
       document.write('<br clear=all>');
       colpos = 0;
       }
     }
   else  
     {
     result = choicename.match(/(.*)\[(.*)\](.*)/);   			// see if HTML for Name contains [.....]
     if ( result != null )
       {
       var textsep = textunder ? '<br>' : ''; 				// do we want text under button
       var twidth = Math.floor(100 / colcount);
       colpos++;
       var cpath = '';
       var curbits = current.match(/(.*\/)(.*)/);			// if we're previewing 
       if ( curbits != null ) cpath = curbits[1];			//  then get path to main image
       var thisimage = result[2];      					// the text within [ ]
       radiohtml += '>';
       document.write('<table width="' + twidth + '%" align=left>');	// start a table if appropriate width
       document.write('<tr><td><img src="' + cpath + thisimage + '">');	// first cell with image
       if ( buttonunder )						// where do we want the button text 
         {
         document.write('<br>' + radiohtml + textsep + result[1] + result[3]);	// button under image
         }
       else
         {
         document.write('</td><td width="100%" valign=top>');		// new cell next to image
         document.write(radiohtml + textsep + result[1] + result[3]);  	// then radio button and description
         }
       document.write('</td></tr></table>');				// finally end table
       if ( colpos >= colcount ) 
         {
         document.write('<br clear=all>');
         colpos = 0;
         }
       }
     else								// no brackets of any kind
       {
       document.write(radiohtml + '>' + choicename);  			// so write the unaltered choice text
       }
    }
}
// END Dynamic Product Images on Radio Buttons




Replace Act_ProductImage.html (in Site1) with the following


<!-- ProductImage HTML begin -->
<!-- This file is used to build the product image markup. -->

<IMG SRC="NETQUOTEVAR:IMAGEFILE"
	  ALT="NETQUOTEVAR:ALTERNATETEXT"
	  BORDER=0
	  NETQUOTEVAR:IMAGEHEIGHT
	  NETQUOTEVAR:IMAGEWIDTH
	  NETQUOTEVAR:OTHERIMAGEMARKUP 
          id="NETQUOTEVAR:IMAGEFILE">

<!-- This file is used to build the product image markup. -->
<!-- ProductImage HTML end -->




Replace Act_VariantRadioButton.html (in Site1) with the following


<!-- VariantRadioButton HTML begin -->
<!-- This template is used for a product variant radio button. -->
<SPAN CLASS="actxsmall">
<script language=JavaScript>
 radioimage('<INPUT TYPE=RADIO NAME="NETQUOTEVAR:ATTRIBUTEREF" VALUE="NETQUOTEVAR:CHOICESELVALUE" NETQUOTEVAR:RADIOCHECKED', 'NETQUOTEVAR:CHOICENAME');
</script>
<noscript><INPUT TYPE=RADIO NAME="NETQUOTEVAR:ATTRIBUTEREF" VALUE="NETQUOTEVAR:CHOICESELVALUE" NETQUOTEVAR:RADIOCHECKED>NETQUOTEVAR:CHOICENAME</noscript>
</SPAN>
<!-- This template is used for a product variant radio button. -->
<!-- VariantRadioButton HTML end -->




In all Product Templates you intend to use with such products
add the following code after the line NETQUOTEVAR:PRODUCTFORMBEGIN


<script language=JavaScript>
<!--
current = 'NETQUOTEVAR:IMAGEFILE';
iwidth = 'NETQUOTEVAR:IMAGEWIDTH';
iheight = 'NETQUOTEVAR:IMAGEHEIGHT';
scaledown = 'CUSTOMVAR:ICONSCALE';
colcount = 'CUSTOMVAR:ICONSPERLINE';
buttonunder = CUSTOMVAR:BUTTONUNDER;
textunder = CUSTOMVAR:TEXTUNDER;
colpos = 0;
// -->
</script>




In Actinic / Advanced / Custom Properties click the "+" sign and create a variable called ICONSCALE.
Again click the "+" sign and create a variable called ICONSPERLINE.
Again click the "+" sign and create a variable called BUTTONUNDER.
Again click the "+" sign and create a variable called TEXTUNDER.

Go to Design / Options / Site Defaults / Properties. Click the "+" sign and select ICONSCALE.
Set it's Value to 5 (for one-fifth size icons - or whatever scale down factor you want).  
If using Business uncheck Searchable and check Use as CUSTOMVAR.

Click the "+" sign and select ICONSPERLINE.
Set it's Value to 1 (for one icon per line - or whatever number across that you want).  
If using Business uncheck Searchable and check Use as CUSTOMVAR.

Click the "+" sign and select BUTTONUNDER.
If you want the Radio Button (and Choice name) under the image then set it's Value to 1.
If you want the  Radio Button to the right of the image set it's value to 0.
If using Business uncheck Searchable and check Use as CUSTOMVAR.

Click the "+" sign and select TEXTUNDER.
If you want the Choice name under the Radio Button then set it's Value to 1.
If you want the Choice name to the right of the Radio Button set it's value to 0.
If using Business uncheck Searchable and check Use as CUSTOMVAR.

Go to Design / Options / Shop Defaults and clear "Default Product Image" (or if you need
such an image put it in the same place as your icons and reselect it).  This allows
icons to be previewed reliably.

That's setup done.


OPERATION


When you have a product that you want to replace the image depending on a radio button selection
do the following.

Set the product to use the image that corresponds to the 1st choice.
For each choice in the HTML for Name field add the image file name within "{" and "}"
(leave out any path name, it will be deduced from the path to the main product image)

e.g.

Main Product uses  Images\widget_blue.jpg
You have an Attribute called Colour
Choice 1 uses      Blue{widget_blue.jpg}
Choice 2 uses      Green{widget_green.jpg}
Choice 3 uses      Yellow{widget_yellow.jpg}
etc.

Save these additional images in the same place as the main product image.
Make sure that these additional images are loaded via Advanced / Additional Files.
(I've not been able to find a way to persuade Actinic to automatically upload these)

Alternatively if you just want small unscaled icons that don't swap the main image against 
each radio button then do as above but use square brackets "[" and "]" instead of the curly ones.
These icons should be put in the same place as the main product image (or the Default Product Image)
if you don't have a main image for a product.

That's that.


NOTES.


The code works in Preview and on Live sites.

All images should be the same size.  
If you don't have an image for a choice I'd recommend you use a dummy blank image.

The scale down factor for the radio button icon can be set by changing Custom Property 
ICONSCALE (if using Business remember to uncheck Searchable and check Use as CUSTOMVAR)
at either the Catalog, Section or Product levels.  

The number of these choices across the page can be changed via the Custom Property 
ICONSPERLINE (if using Business remember to uncheck Searchable and check Use as CUSTOMVAR)
at either the Catalog, Section or Product levels.

Also you can change the radio button position via BUTTONUNDER and text position via TEXTUNDER.
at either the Catalog, Section or Product levels.
(if using Business remember to uncheck Searchable and check Use as CUSTOMVAR)


LAYOUT

Because of the way radio buttons are created by Actinic there is no way to detect when
the last one has been generated.  If you display these buttons in columns and the final row 
isn't full then the next attribute name may be displayed in the remaining position.

A work-around for this is to change Act_VariantAttributeName.html to be:-

<br clear=all><span class="actxsmall">NETQUOTEVAR:ATTRIBUTENAME</span><br>

as this will allow further attributes to line up better.
  
Alternatively you can put "<br clear=all>" into the User Defined Separator field 
of the Attribute that uses these buttons.

Tested with IE6, Netscape 7 and Opera 7.