One cable I sell has 7 versions for different motorcycles, and I want to have the customer select from the ListBox the correct cable, then using PHP or Javascript, change the displayed image to match their motorcycle.
 
Any suggestions before I begin would be most welcome. I'll post my code for anyone else who wishes it when finished.
 
Ed

It's not PHP you need but a simple Javascript that you can add in Dashboard > Products > Products & Categories > Edit Product Option > Javascript Settings > 'OnChange Event':
 
document.image_{form_id}.src='images/big/image' + this.form.property{form_id}_{property_id}.options[this.form.property{form_id}_{property_id}.selectedIndex].value + '.jpg';
 
You can read more information in this manual:
http://www.viart.com/product_options_settings.html
 
But make sure to use the code above not the one in manual because in v.3.6 the code was a little different.
 
Regards,
ViArt Team

Interesting! I doubt I would have come up with that particular JavaScript line on my own! Looks as if it will let me change the displayed main image with a different one in a static manner. I think it could be coded to do the job for all 7 or so images in the OnChange event for the list box, based on the index value, just using the static image from my folders.
 
When there is JS on a product option, does that override the normal behavior, or do both scripts fire in sequence??
 
One other idea strikes me as well:
 
Since I will soon have all 7 of the images I want already loaded in the rollover images below the main image, would it be feasible to just automatically 'scroll' the rollover images to the correct one based on the image number,or other identifier and then the main image displays as usual, but this time based on the index of the list box.
 
For example, one of my "below main image" images is this:
 
...<div class="rolloverImagesTop">
<a href="http://www.edsets.com/images/super/full-3g_2.jpg" target="_blank" onclick="openSuperImage(this); return false; " onmouseover="rolloverImage(143, 'http://www.edsets.com/images/big/full-3g_1.jpg', 'image_191', 'super_link_191', 'http://www.edsets.com/images/super/full-3g_2.jpg', 'blackImg'); return false;"><img src="http://www.edsets.com/images/small/full-3g.jpg" border="0" alt="3G Full System" /></a>...
 
I'm not sure how to determine how this code is generated, but if it's possible to simply mimic the normal rollover based on the index of the list box option, that would be fantastic, and worth some $$ to me!
 
Thanks! I'll let you know what I end up with in case others want to use it.
 
Ed

I got this working nicely. The instructions were clear enough, but it was not obvious in the JS code in the section
 
document.image_{form_id}.src='images/big/image' + this.form.property{form_id}_{property_id}.options[this.form.property{form_id}_{property_id}.selectedIndex].value + '.jpg';
 
that 'image' meant the image file WITHOUT any extension... So if you put in 'MyImage12' it's ok, but 'MyImage12.png' is no good, and I only realized that the code was tagging on the extension itself.
 
Sometimes, read 5 times, THEN react!
 
Ed