How can i insert Images into a drop down menu?

[Thomas H]

Hi everyone, bit of a puzzler, and maybe i'm asking the impossible here!
BUT... Im in the middle of compiling my first Actinic catalog online shop, for an office furniture business. The problem that i am experiencing is that i need to offer the client base a range of color options for the seats, Brill.... i can use the attributes and component feature! there are 56 colours that we wish to offer the client, with 20 different prices to each of the colours. So thats 1120 different attributes over each of our 300 products so you can see the numbers adding up!... Actinic copes with this wonderfully. Hence the choice of using the software. But ideally id like to be able to offer the customer a visual of a colour and working on the basis that it should be 3 clicks to a Sale! I need to really offer the colour choice in the drop down menu, as the only other alternitive is to create 1120 product pages for each of the colours and there individual prices.... Then link each of those back to each chair!!! eeek! that means 336000 links! ARGH!!! Which isnt a fun thought! Can any one help PLEASE!

[RobSollars]

Would it be possible to accomplish this by changing the text colour? With a little javascript and CSS, and providing all your options are basic enough colours (orange, blue and greens rather than more descriptive colour names), this should be very possible to accomplish, simply by using a little string editing when the lists are populated.

[Kermy]

Are you capable of writing some javascript? One suggestion would be to create a box next to the drop-down menu, and use javascript to change the background colour of the box when a user selects a colour option.

Would it be possible to accomplish this by changing the text colour?

Is this possible with options inside drop-downs? I didn't think styles could be applied to them, just the entire drop down. Or am i wrong...?

[Thomas H]

Thats a good solution, BUT... Unfortunately there colours like Cobalt,Royal. or utopia. So i was looking to see if there was a way of embedding a small jpg file into each of the text areas?? any ideas??

[Kermy]

I just tried adding a background image to the options, which works fine in Firefox, but IE doesn't seem to like applying CSS commands to <option> tags. The javascript method I mentioned could be used to change the image shown, or just alter the displayed colour.

[NormanRouxel]

Have a look on www.drillpine.biz/actinicstuff

There are 2 things there that might help.

One is a NorMap (clickable image map that selects an Actinic attribute). This would be an efficient way of showing your choices in, say, a 7 x 8 matrix.

And the other Dynamic Product Images (putting images against radio buttons that alter the main product image when selected). This also allows you to change the main image when a drop-down choice is selected.

[RobSollars]

I just got back from lunch and tried adding inidividual styles to <option>s and found this method to be successful in both IE and Firefox. Therefore, an easy enough solution would be to create style based on every colour in the range (assuming the vermillion can be accurately represented in the web safe colour palette) and then applying styles to the invidiual options via the DOM based on the contents of the options.

As long as the names of the colours are limited to a small selection and are conisistent in their naming, then creating a seperate style sheet where you have nothing but styles such as:

.blue{
background:#0000FF;
}

should work. From there, you can just add a small javascript function that takes the contents of the <option> tag, compares that to the name of a style, and inserts that style as an attribute of the <option>. It might not be a perfect solution, but it's certainly a solution

[Kermy]

I just got back from lunch and tried adding inidividual styles to <option>s and found this method to be successful in both IE and Firefox

I still can't seem to get background images to work under IE, although other CSS styles appear fine. Odd. Your solutions seems best, the only drawback being any text could be tricky to read!

[RobSollars]

I just tried adding background images and got exactly the same results. Firefox shows it fine, but IE refuses completely. I did a little bit of experimenting and found that Firefox also accepts properties like text-decoration as attributes for <option>s, whereas IE will not.

The issue with the text being difficult to read did not occur to me, but thinking about it, it would be a pain to resolve. I think that your suggestion of having a box or something next to the drop down list that updated on the onMouseOver event of the <option> would not only allow the placement of images, but also keep the text readable throughout, and would also probably look much nicer. I think both methods would be equally achievable, though.

[Thomas H]

Is there any way of displaying a thumbnail next to the standard text, ie would it work if we were to write into the J.S. an 'imgsrc' link. To display an image only 80 pixels x 20 pixels... with the txt to the right of it, all intergrated into a drop down, would this require a dynamic JS? How would i do that.... if its possible? Sorry im a Java script rookie! A.K.A. idiot! Is any body able to walk me thru this? Thanks for your help and taking the time to look into it!

Tom.

[wjcampbe]

Thomas - did you miss post #6 - that's an offer of help from one of the most capable people on this forum.

[Kermy]

There's no way to include images into the choices within a drop-down, they are text-only deals I'm afraid.

You either have to use Rob's method - which would allow you to create a drop-down where the backgrounds are coloured - or my solution, which would have a 'preview' box to display the image. Alternatively, look at the solutions that Norman provided.

If you want to use either of the first two let us know.

[RobSollars]

As far as I'm aware, <select> boxes cannot display images within the options. However, it would be very easy for you to set it up differently so that you had your drop down list, to the right or left of which is a small box that updates automatically as the user mouses over the options in the list.

The swatch to the side of the drop down list could be any size you wanted and could be an image or just a specific colour. The obvious limitation is that it requires the user to mouse over the colour before they are given any feedback. The only real alternative is to set the background colours of the individual <option>s based on previous suggestions, though.

Edit: Kermy beat me to it!

[Thomas H]

Gents, Thankyou, sorry was speed reading the links in between juggling everything else thats going on! If either of you know where i might be able to get hold of an applicable script that would be most useful, thank you again for your time.

Tom.

[completerookie]

have you tried this (and before everyone says so, I don't think it works in EVERY browser) - I think its opera that has a problem? - perhaps other people can check for me.

<form><p align="center">
<select name="select1" style="font-size: 15px;">
<option value="0" style="background-color:#FFFFFF;">White FFFFFF
<option value="1" style="background-color:#FFB6C1;">LightPink FFB6C1
<option value="2" style="background-color:#FF69B4;">HotPink FF69B4
<option value="3" style="background-color:#FF0000;">Red FF0000
<option value="4" style="background-color:#A52A2A;">Brown A52A2A
.....
.....
</select>
</p></form>

you could use a customvar:colour within each of the <option></option> to generate the correct colour

I saw this concept used on this very forum, look at the <colour> dropdown when you play with the format of the text when you reply to a question !

kev