I'm trying to do something a little out of the ordinary with my search form.

We have several different areas of search and they're selectable via the tabbed buttons at the top of the form (currently).

(Example: www.websavvy.cc)

The way I did this was to create <div> that are not displayed until one of the tabs is clicked on, and then it loads the search form for that search area into the <div>

It relies on JS, so for JS disabled browsers there's a text version that uses an option menu.

I'm redesigning the search form, and want to have an image button (select) that will pop open the options list which would do away with the need for JS and make it even more web accessible.

The problem is, this isn't easily done (that I know of). I've tried every way I can think of to do this and still no joy.

Does anyone have any suggestions on this one because I'm totally stumped.

Originally Posted by WebSavvy

I'm redesigning the search form, and want to have an image button (select) that will pop open the options list which would do away with the need for JS and make it even more web accessible.

Could you rephrase the question? Or point to an example of the effect you're trying to create, in action? Sounds like you want to build something like the color toolbar button in the reply form here?

No ... it's something different.

Have a look at Google, and note the "More" option. When clicked on, it opens a selection menu.

I want to do something similar -- but using an image, and the selection menu would be the options list to search:

Directory
Video
Images
News
... and the rest of our searchable areas.

Make any more sense now?

I've been looking over code, and so far everything that could possibly be used is functional only when a browser is JS-enabled.

I thought maybe a ToolTip, or DHTML popup menu (when the image button is clicked) would be a good solution ... BUT, again they rely on JS.

I want to do something that doesn't rely on JS but achieves the same desired outcome (I'm not even sure if what I want to do is even possible?)

The only non-java way I could imagine to make that work is actually requesting the page again, with a query string. And that's definitely not what you want.

I saw a tutorial on pop-outs using CSS and nothing else, will have to see if I can find the URL for you. I read it a couple of months ago, so this will take some digging, but maybe if I can find it, it can give you some ideas.

I haven't been able to find the link (yet), but this might be helpful?

http://www.positioniseverything.net/css-flyout.html
http://www.communitymx.com/content/a....cfm?cid=55A69

Will let you know if I can find the original one, though. These aren't exactly what you're looking for, but hopefully they'll be somewhat helpful...?

Hey, Thanks Forrest!

I was just thinking about maybe doing this via the CSS route. What I'm thinking is, maybe setting the selections into an opti-group, and the opti-group background will be the "image" (not sure if it's possible -- have to try that first) and then set an option class in CSS to display:none until the opti-group header is hovered over.

Then, the group of selections (options) can be in a borderless list (sort of) that floats just off to the right of the button image used by the opti-group.

I did an image capture of what our new form will look like, and then added the options (like I want them to appear) by adding to the image using paintbrushes.

I'll attach a copy in the next post so you can see what I'm trying to do.

<edited>

Woohoo! I fiddled around with my codes, some CSS floats, an on-hover class and I have it working now. (and it validates XHTML 1.1 !!!)

</edited>

Thanks for your help, Forrest.