Announcement

**cdicken** · 03-Jun-2003, 01:55 PM

There is one possible solution here which involves putting the code for images within the 'HTML for Name' field of a set of radio buttons.

The HTML for Name field can also be used to add values in the drop-down list. Whether or not Javascript could read these and act upon them is another matter.

**vestedinterest** · 03-Jun-2003, 02:33 PM

Thanks for that, I did look at that post before however I have a list of over a hundred choices therefor the check box isn't an option.
Can I force actinic to use the choice name for the option value instead of the numbers it generates, if so I may be able to create a solution.

**cdicken** · 04-Jun-2003, 01:15 PM

Unfortunately not. These choice values are all hard-wired into the online cart and checkout so it is not possible to get access to them.

**NormanRouxel** · 04-Jun-2003, 02:42 PM

If you fancy doing this another way I've a set of extensions to Actinic that auto create an image map from the list of choices.

You include a single big image containing a matrix of thumbnails of your choices and the appropriate choice is selected when you click that particular bit of the image.

See http://www.drillpine.biz/aura/acatal...izes_Demo.html for a demo and http://www.rouxel.cwc.net/actinicstuff.html for details.

Norman

**vestedinterest** · 05-Jun-2003, 08:53 AM

I did see this extension before however with the number of options I have it would look messy. I had hoped there would be other solutions. I will have to go and have a rethink. Thanks for the help.

**NormanRouxel** · 05-Jun-2003, 10:33 AM

I managed to adapt an existing hack to do what you need. Try this:-

Code:

Displaying a pop up image (or other info) when a drop down choice is selected.
You put the additional information into the "HTML for Name" field of each choice
within round brackets ( ).

e.g.  Left Handed (leftimage.jpg) Operation
      Right Handed (rightimage.jpg) Operation

The information within the brackets will be hidden from display and stored in an array.
The stored item will be available in the JavaScript routine showimage whenever a choice is selected.
Note:-  You should not use the single quote ' character in any of your choices "HTML for Name" fields.


Put the following code into Act_primary.html (just above the <BODY> tag).



<script language=JavaScript>
function setchoice(choicename){
 var thisimage = '';
 var result = choicename.match(/(.*)\((.*)\)(.*)/);  // see if HTML for Name contains (.....)
 if ( result != null )
   {
   document.write(result[1] + result[3]);	// hide the embedded image
   thisimage = result[2];      			// the text within ( )
   }
 else
   {
   document.write(choicename);  		// the unaltered choice text
   }   

 eval(current + '[' + base++ + '] = \'' + thisimage + '\'');  // save the image name
}

function showimage(value){
 if ( value != '' )
   {
   alert(value);			// your own code here
   }
}
</script>




You should change the code in showimage to do whatever you need.

Replace Act_VariantListHeader with the following code:-



<!-- VariantListHeader HTML begin -->
<!-- This template is used for a product variant list box header. -->

<script language=JavaScript>
 var imgNETQUOTEVAR:ATTRIBUTEREF = new Array();
 var current = 'imgNETQUOTEVAR:ATTRIBUTEREF';
 var base = 1;
</script>

<SELECT NAME="NETQUOTEVAR:ATTRIBUTEREF" onchange="showimage(imgNETQUOTEVAR:ATTRIBUTEREF[this.value])">

<!-- This template is used for a product variant list box header. -->
<!-- VariantListHeader HTML end -->




Replace Act_VariantListChoice.html with the following code:-



<!-- VariantListChoice HTML begin -->
<!-- This template is used for a product variant list box choice. -->

<OPTION VALUE=NETQUOTEVAR:CHOICESELVALUE NETQUOTEVAR:ITEMSELECTED>

<script language=JavaScript>
 setchoice('NETQUOTEVAR:CHOICENAME');
</script>

<!-- This template is used for a product variant list box choice. -->
<!-- VariantListChoice HTML end -->


Update and that's that.

The code above works on live sites.   It may fail when previewing.

Norman

**vestedinterest** · 12-Jun-2003, 08:33 AM

Hi
Thanks for the excellent response however I cannot get the code to work properly. If I put it into the pages as you describe the drop downs are blank but I have discovered if I comment out the eval line the dropdowns are populated! I'm no javascript guru so cant figure this out. Can you help me again or do you have a site where this code is used?

Thanks again

Andrew

**NormanRouxel** · 12-Jun-2003, 10:00 AM

Do your image names have arithmetic characters in them e.g. "-"? If so try using just textual image names.

Norman

**NormanRouxel** · 12-Jun-2003, 10:19 AM

Sorry about that. Your reply led me straight to it.

It's the darn forum munging the pasted in code (even within CODE tags).

It seems to be displaying backslash escaped characters instead of showing the backslash and then the following character as written. Not very useful on a technical forum.

I've attached the relevant file instead. I also added a tiny bit to make it fail-safe on non-JavaScript browsers.

If anyone else is reading the thread don't use the info posted a few entries above. Use this attached file instead.

Norman

Attached Files

popupimagewhenselectingachoice.txt (2.4 KB, 305 views)

**vestedinterest** · 12-Jun-2003, 11:42 AM

BRILLIANT!
Thats fantastic. The noscript code displays the choice twice but I'll leave it out for now.
Thanks again
Andrew

**NormanRouxel** · 12-Jun-2003, 01:17 PM

The noscript code displays the choice twice but I'll leave it out for now

Wierd! Try it with capitals.

Norman

Announcement

drop down list manipulation

drop down list manipulation

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment