I have a contact form with a selection menu, in which I would like to have a rollover effect on each item in the menu. When the user rolls over each item, I want an image relative to the item to display. I have attached two screenshots demonstrating what I want to accomplish.
Thanks,
Sam
Oooh, I’ve never seen anything done like that within a <select> list. I’m not sure that it would be possible, given the limited options you have for content in a drop-down.
Hi Sam,
Whenever I see “I’m not sure it would be possible” in a reply to a post, I always like to set myself a wee challenge! 99.9% of the time, I can’t come up with anything useful to contribute, but this time (for once in my life) I’ve come up with something - not 100% duplicate of your screenshots, but along the same lines and, I think, achieves a similar effect - just with some simple CSS.
However, before I get too smug, this “solution” - as so many things in the land of the web - only works in Firefox. I’m using ver 3.6.13 on a Mac OS 10.6.6, and it also works in Firefox ver 3.6.12 on Windows Vista - but can’t get it to work in any other browser, but I thought it might be useful to post up here just in case there are any geniuses out there who can take my wee acorn of code idea and turn it into something better…
Anyway, here’s what I did. Basically, I attached a CSS id to each of the <option> tags within the <select> tag then, using a CSS :hover selector on each of those ids, added a background image to each option.
You can see it here: My little acorn of an idea
Everyone, please feel free to go in and view the source code and see if you can take it a wee bit further!
Hope I’ve helped a little bit…
Cat
It doesn’t work in Chrome. But it looks awesome in Firefox. Thank you for this.