Dynamic changing of the product image when a radio choice or drop down list 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]



CHANGE LOG

20-02-06 V2.07	New feature.  Clicking Radio Icon will make choice.  Alt tag added to Radio Icon.  
		Changed files:
			dynamicimagesupport.js

20-02-06 V2.06	Bugfix.  JavaScript error if using SELECT statement with images.  
		Changed files:
			dynamicimagesupport.js

12-01-06 V2.05	Repeat of V2.02 patch.  (It may not have been added to Zipfile).  
		Changed files:
			dynamicimagesupport.js
			Act_VariantListHeader.html

10-01-06 V2.04	Amended to allow for single quotes in Product Image filenames.  
	  	Changed files:
			this ReadMe (re patch to Product Templates)

03-01-06 V2.03	Added more info on correcting layout problems with multi-column buttons.
		Changed files:
			this ReadMe


31-12-05 V2.02	Tidy up. Tidied code in Act_VariantListHeader.html
		Changed files:
			dynamicimagesupport.js
			Act_VariantListHeader.html
 
23-12-05 V2.01	Bugfix. If product had Component got error on Preview.
		Bug is actually Actinic creating Hidden Field for the Component with the 
		same name as the first choice.
		Changed files:
			dynamicimagesupport.js
			Act_VariantListHeader.html
 
22-12-05 V2.00	Bugfix. SELECT wasn't finding images if Preview.
	 	Rewrote SELECT code to use Objects instead of Eval().
		Renamed some variables in case they conflict with other patches.
		Now using Zipfile containing replaced Templates.
		Changed files:
			dynamicimagesupport.js
			this ReadMe
	NOTE	If updating from an earlier version you will need to follow all instructions
		below - especially the bit on patching your Product Templates.

03-09-05 	Bugfix. SELECT code failed with Duplicate products
		 	Changed files:
			dynamicimagesupport.js

19-11-04 	Actinic V7 compatibility

28-09-04 	Amended Radio code for more efficiency.  
		 	Changed files:
			dynamicimagesupport.js
			Act_VariantRadioButton.html
 
27-09-04 	rewrite of SELECT code.  
		 	Changed files:
			dynamicimagesupport.js
			Act_VariantListHeader.html
		 	Act_VariantListChoice.html
			Act_VariantListFooter.html

25-09-04 	amended to allow for images within SELECT list options

04-01-04 	to allow for alternative layouts and small non-swapping icons.

24-12-03 	to allow for multiple items per line.


Author Norman Rouxel - www.drillpine.biz (V11)


PRELIMINARY


Before you do anything else please back up the following files (from your Site1 folder).

Act_Primary.html
Act_ProductImage.html
Act_VariantListHeader.html
Act_VariantListChoice.html
Act_VariantListFooter.html
Act_VariantRadioButton.html
All Product Templates you intend to use.  E.g Act_ProductLine.html, etc.

It wouldn't hurt to take a Snapshot and to make a complete copy of everthing in Site1 (and sub-folders) as well.


SETUP


Once you've backup up as above, unzip this Zipfile into Site1 (or your Site folder if you have more than 1).


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

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



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



<script language=JavaScript>
<!-- (V11)
current = "NETQUOTEVAR:IMAGEFILE";
iwidth = 'NETQUOTEVAR:IMAGEWIDTH';
iheight = 'NETQUOTEVAR:IMAGEHEIGHT';
scaledown = 'CUSTOMVAR:ICONSCALE';
rcolcount = 'CUSTOMVAR:ICONSPERLINE';
buttonunder = CUSTOMVAR:BUTTONUNDER;
textunder = CUSTOMVAR:TEXTUNDER;
rcolpos = 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.

You can't use the same main image (as a main image) more than once on a page.  
If you want more than one of the same image copy it to a new unique name and use that 
for the next products main image.
There's no restriction on the select images.

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.


If this problem is affecting your Add to Cart Button then edit Act_CartButtonImage.html 

and replace

<P align=right>

with

<br clear=all><div align=right>

and replace

</P>

with

</div>



If you are using TEXTUNDER and BUTTONUNDER then you may want to center everything.  
To do this edit dynamicimagesupport.js and change the line

     document.write('<tr><td><img src="' + cpath + thisimage 			// first cell with image

to

     document.write('<tr align=center><td><img src="' + cpath + thisimage 			// first cell with image


Tested with IE6, Netscape 7 and Opera 7.


UNINSTALLATION


Restore the files you backed-up:-


Act_Primary.html
Act_ProductImage.html
Act_VariantListHeader.html
Act_VariantListChoice.html
Act_VariantListFooter.html
Act_VariantRadioButton.html
All Product Templates you modified.  E.g Act_ProductLine.html, etc.
