View Full Version : Images in drop down menu
clairec
27-Mar-2003, 01:16 PM
Does anyone have an example of using images in a attribute drop down menu? I want to allow the customer to choose a logo for a garment but I can't figure how to get the image to appear in a drop down menu. There are too many logos to put them all on the product page as radio buttons.
thanks,
Claire
NormanRouxel
27-Mar-2003, 04:49 PM
I guess what you'd ideally like is to have a logo area on the page and it to be filled in (in rollover menu style) when each Select option is scrolled to. This could involve delays for the user as you'd either have to pre-load a lot of small images or wait till they arrived from the server.
I've never done that but have used Image Maps to select from a large range of sub-images. Have you considered this. You could have a big image map containing all your logos and when the customer click the appropriate bit of the map a tiny bit of Javascript selects the appropriate Radio Button.
See http://www.snowlines.co.uk/acatalog/Snowlines_Online-FISHING-FLY_SALMON-FLIES-WET_FLIES.html where there are 63 items in the map and another 300 size / quantity combinations all selectable on the one page.
Norman
clairec
31-Mar-2003, 03:51 PM
Hi Norman,
I looked at the code behind the link you gave, thanks.
Can I check, you have a hidden field that the clicked item number goes into:
<input type=hidden name="002985" value=""><input type=button value="All done" onclick="addcomp('002985',0,0);">
then on each image and text lin you put the code <a href="javascript:addcomp('002985',2,1)">Alexandra</a on as a link.
Then up in the header you have a lot of code, is the piece that I need this:
function addcomp(choice,row,col) and all after that?
There seems to be a lot of files to do with arrays, I don't I need all that info, I just want the code to appear in a box and for that info to go to the shop cart when the person clicks buy now.
Thanks
Claire
NormanRouxel
31-Mar-2003, 04:28 PM
Hi,
The version you're looking at allows two choice (like colour and size) to be selected depending on the row and column clicked in the image map. And the particular page I mentioned does something much more complicated, but is the only one I have online that uses image maps.
If I'm correct you might have a single Attribute (called Logo) with lots of choices (same price) that you want to choose between when the image map is clicked. You could have a <select..> statement (created the usual Actinic way) doing the same thing and the image map would pre-set it to the appropriate item when clicked.
Please let me know if that is what is needed as it will be much simpler to implement.
Norman
clairec
31-Mar-2003, 05:08 PM
Hi Norman,
Yes it is a simpler item I need. I can do a html page with an image map or each logo as a seperate image. When I click on one of these images I would like the image number to appear in a box on the product page. I can set an attribute, call it logos and put in a list box.
How can I get the number on the image to appear in this list when it's clicked and get that to go onto the product order?
Thanks for your help,
Claire
NormanRouxel
31-Mar-2003, 08:58 PM
Try this. I've tested it with IE and Netscape.
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 product form ' + fname);
return false;
}
else
{
formno = tf;
fieldno = te;
docform = df[tf];
return docform.elements[fieldno];
}
}
function setoption(prodref,attribcount,select)
{
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.
Norman
clairec
01-Apr-2003, 08:53 AM
Hi Norman,
Thanks for the code, I tried it out. I am having a few problems.
I followed the instructions, and the logo attribute is 3rd in the list so I changed the sequence to 3 and left the index to 1,2,3 etc.
I have the attribute logo as a drop down menu with 4 choices on it.
When I upload it to a temp site and test it I get th following error:
The requested URL /acatalog/java script:setoption('63-450-0',3,1) was not found on this server.
It brings up a new page with this error on it?
ANy ideas why that would happen?
Thanks
Claire
NormanRouxel
01-Apr-2003, 10:31 AM
Easy one to fix. The bl$$dy Forum has changed the word "JavaScript" to java script in several places. It may just have done so again on this reply.
In case this doesn't get through unaltered the word JavaScript should be capitalised like this and should have no space in the middle.
Norman
clairec
01-Apr-2003, 10:55 AM
Hi Norman,
I change the JavaScript name and now when I click on the image map it brings up an error box saying
Cannot find product form v_63-450-0_3
where 63-440-0 is the product refernece no.
I wonder where it is getting the v before the reference no.?
Thanks,
Claire
NormanRouxel
01-Apr-2003, 12:19 PM
Hmmmm. All seems OK. That message means that it can't find the <SELECT..> statement that should have been generated by Actinic when you created attribute 3.
Are you sure that you've created a drop down box for the third choice? You should be able to see it on the page. Also are you trying this on a server or with the preview facility. I use a local server here and haven't tried it with preview.
If the page is on-line anywhere please give me the URL and I'll have a look. If the page is offline please open it in your browser and do a View Source and paste that lot into a txt file and attach it and I'll have a look.
Norman
clairec
01-Apr-2003, 01:05 PM
Hi Norman,
I was testing it locally so I uplaoded it and yes it seems to work.
At last!
But when I add to cart it gives me an error, I can't see what the error is but it may not be releated to the logo.
I'll keep trying it.
You can have a look at the page on a temp site:
http://www.uni-graphics.com/acatalog/63_450_0.html
Regards,
Claire
NormanRouxel
01-Apr-2003, 01:15 PM
Your page worked fine for me. However if you forget to enter the text for the logo you (correctly) get an error page. This highlights the missing field in red but that's a bit hard to notice as it exactly matches your colour scheme. You may want to see if that can be altered.
The script needs one small change to work when previewed. Actinic (unnecessarily) sequences attributes slightly differently on a preview. I've attached a new set of instructions. It's only the imagamapsupport.js bit that needs changing.
Norman
p.s. You can have more than 1 map per product so you could get at all these colour / location things the same way.
clairec
01-Apr-2003, 04:39 PM
Hi Norman,
Thanks for the update.
I tried it but I am still getting an error on the local preview.
It's not just the same as the last time:
Cannot find form elementv_63-450-0_3
It has the v right up against the element so maybe that is the problem?
Regards
Breda
NormanRouxel
01-Apr-2003, 05:18 PM
Wierd. The change worked here on my Previews.
Your web-site now has the corrected code (I checked it).
Try hitting the "Refresh" button when previewing in case it's just an old version in the browsers cache. You might also want to try Control / Refresh and Shift / Refresh just to be sure.
Norman
clairec
01-Apr-2003, 05:43 PM
Hi Norman
Yes it's very strange, it keeps giving an error locally but if it works on line I don't mind.
Another problem I have is I am using the extended info option for the colours. But I set an image colour_but.gif as the button to click.
I used the same graphic for all the products info but when I upload the files it says that there are duplicates of the file name and I can't uplaod.
Can I use the smae image for all the extended buttons?
I had to change them all to text links to get the files up.
Thanks,
Breda
NormanRouxel
01-Apr-2003, 05:50 PM
Re. the map preview problem. When you preview a page what appears in the Adress field of your browser?
I'd like to fix this; so just do a View source of the problem preview page, and copy the text to a textfile and attach it here. Then I can see what your copy of Actinic is generating.
Re. the other problem. I'm not Actinic and don't know what's wrong there. Let's hope someone else does. If no-one replies (they might not be interested in this topic) you might want to post it as a new topic.
Norman
NormanRouxel
02-Apr-2003, 06:04 AM
Claire,
Driving home late last night it occurred to me that it might be possible to generate the image map automatically to save all that hassle of creating one by hand.
Well 6 hours later it's done! An extension to Catalog that allows an image map to be automatically generated from a chosen Attribute and image. There's no messing around customising a template for each product that needs a map. It all happens automatically if you add a few hidden lines to the product description. It even bungs in ALT tags for each image area so that the Choice description appears as you mouseover.
This is such a timesaver that I think I might make it a product. As you prompted this you're welcome to a copy. Let me know your e-mail address and I'll send you the instructions.
Off to get some sleep now!!
Norman
clairec
02-Apr-2003, 07:53 AM
Hi Norman,
Do you sleep? What you've come up with sounds great.
You can email me at services@aura.ie
I am attaching the problem with the preview page, the image map only has a few of the logos in so only the first 3 actually work for the moment.
Thanks again,
Claire
NormanRouxel
02-Apr-2003, 04:04 PM
Ooops. There was an error in the readme I sent you. New copies are on the way plus a more elegant version that uses custom properties to set all the map marameters.
Norman
I'll look at your existing problem later.
NormanRouxel
03-Apr-2003, 01:56 AM
I looked at the textfile you sent and the problem is that in Preview mode Actinic never expects any scripts to be run so it generates wierd code for the select statments. This can't be fixed.
However my super-duper image map extension that I've e-mailed to you has no limitations.
Norman
Scottne
03-Apr-2003, 11:42 PM
is there any chance I could get a copy of the imagemap extension as well?
I'd be very appreciative, scottsimard@hotmail.com
Thanks
vBulletin® v3.8.4, Copyright ©2000-2012, Jelsoft Enterprises Ltd.