Making an image map that will select between a choice.

Make file in Site1 called "imagemapsupport.js" containing the following code.


	//  START of imagemapsupport.js
	var formno, fieldno, docform;
	function locatefield(fname){
	  formno = '';
	  fieldno = '';
	  // look through all forms 'till one containing field "fname"
	  var tf = -1;
	  var te = 0;
	  var df = document.forms;
	  var i = df.length - 1;
	  for ( var j = 0; j <= i; j++ )
	    {
	    var k = df[j].length - 1; 
	    for ( var l = 0; l <= k; l++ )
	      {
	      if ( df[j].elements[l].name == (fname) ) 
	        {
	        tf = j;
	        te = l;
	        }
	      }
	    }
	  if ( tf < 0 )
	    {
 	   alert('Cannot find form element' + fname);
	    return false;
	    }
	  else
	    {
	    formno = tf;
	    fieldno = te;
	    docform = df[tf];
	    return docform.elements[fieldno];
	    }
	}

	function setoption(prodref,attribcount,select)
	  {
          if ( location.href.indexOf('PreviewHTML') != -1 ) attribcount--;
	  var thisselect = locatefield('v_' + prodref + '_' + attribcount);
	  thisselect.selectedIndex = select - 1;
	 }
	// END of imagemapsupport.js


Place the following line into Act_Primary.html (just above the <BODY...> tag).

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

make a copy of your Act_ProductLine.html template (say ImageMapProductLine.html)

Add the following code where needed in that template:-

	<IMG SRC="myimage.jpg" usemap="#NETQUOTEVAR:PRODUCTREFERENCE" width=123 height=123>
	<map name="NETQUOTEVAR:PRODUCTREFERENCE">
	<area shape="circle" coords="25,25,15" href="javascript:setoption('NETQUOTEVAR:PRODUCTREFERENCE',1,1)">
	<area shape="circle" coords="50,50,15" href="javascript:setoption('NETQUOTEVAR:PRODUCTREFERENCE',1,2)">
	<area shape="circle" coords="75,75,15" href="javascript:setoption('NETQUOTEVAR:PRODUCTREFERENCE',1,3)">
	</map>

You'll need to change the image name width and height to suit.

The <area...> tags will need editing to suit.

The final 2 parameters in ('NETQUOTEVAR:PRODUCTREFERENCE',1,1) must be edited.

The first one is the sequence of that particular Attribute (i.e. 1 if the map is the first product attribute)
    this number should be the same for all the <area...> tags for that image.

The second number is the index of the choice to be selected when that area is clicked.  These would
    usually run in sequence.

You have to make sure that the Attribute uses a Drop Down List as the code above will not work on radio buttons.