Dynamic changing of product image when a radio choice is selected.
In addition a 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.

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>
<!--  Dynamic Product Images on Radio Buttons
var current = '';
var scaledown;
var colcount;
var colpos;
function radioimage(radiohtml, choicename){
   var result = choicename.match(/(.*)\{(.*)\}(.*)/);     // see if HTML for Name contains {.....}
   if ( result != null )
     {
     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 ( curbits != null ) cpath = curbits[1];
     var thisimage = result[2];      			// the text within { }
     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><tr><td><img src="' + cpath + thisimage 
                  + '" width=' + thiswidth + ' height=' + thisheight + '></td><td width="100%" valign=top>');
     document.write(radiohtml + ' onClick="document.getElementById(\'' + current + '\').src=\'' + cpath + thisimage + '\'">');
     document.write(result[1] + result[3] + '</td></tr></table>');	        // hide the embedded image
     if ( colpos >= colcount ) 
       {
       document.write('<br clear=all>');
       colpos = 0;
       }
     }
   else
     {
     document.write(radiohtml + '>' + choicename);  		// the unaltered choice text
     }
}
// -->
</script>




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 
	  name="NETQUOTEVAR:IMAGEFILE" 
          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';
colpos = 0;
// -->
</script>




In Actinic / Advanced / Custom Properties click the "+" sign and create a variable called ICONSCALE.
Create another called ICONSPERLINE.

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.

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 Site1\PreviewHTML (so they'll appear on site previews).
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)

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.


Tested with IE6, Netscape 7 and Opera 7.