Can I place a dropdown box on top of a button?

[Sharon P]

Hello,

I am new here so please forgive me if this is not in the proper forum...I wasn't sure whether to ask here or in the Java Script forum.

I am using a basic java script to create drop down boxes /no go button on a page I am creating....and what I would like to be able to do is put the window of the selection box on top of a pretty button instead of just having the plain box and arrow there.

I am very new to Java...and usually just rely on standard downloadable scripts to do what I want..I have found how to use an image for the "Go" button, which I do not need because I don't use a Go button....but I can't find anything that will allow you to use an image for the box itself. Hence, I am not sure if this is possible...or if it is, how to do this. Any help would be greatly appreciated. TIA

Sharon...

[starglow]

sounds to me like you're looking for a rollover image that acts like a drop down menu but it isn't really.

[Sharon P]

I actually have the dropdown boxes all configured...I guess what I need to know is how can I then simply PLACE those boxes on top of an image....or actually since the boxes are already in place...to place an image behind them so to speak. I don't expect the image/button itself to do anything...just would like to have them appear behind the boxes for cosmetic effect. I have found many "tutorials" on how to place a backround color behind them...and even how to change the color of the backround INSIDE the boxes....but not how to place the whole shebang on top of an image. ;(

I have searched out numerous html, css, and js "tricks and tips", and have tried every one I have found that appeared to at least remotely do what I want to do...but I just can't get something to work that will sort of layer those 2 objects....yet I feel there has got to be a way...it sounds like such a simple thing....so feel I just must be missing something. So if anyone has any ideas...I sure would appreciate them before I need to go out and buy a wig!! LOL

TIA.... Sharon...

[Roy Sinclair]

This should work:


<div style="background-image: url("aGIF.gif")">
<select name="aSelect">
<option>1</option>
</select>
</div>

[Sharon P]

But then I'm not sure I was putting it in the proper place...should that line go in the "Head" section...or down in the "body" ?? I told ya'll I was a bit new at this.... ;)

Ok...maybe it would be helpful if I showed you my existing code:

In the "Head" section is:
<SCRIPT LANGUAGE="JavaScript">
<!--//

function pagejump(to_url) {
if (to_url != "") {
window.location=to_url
}
}
//-->
</SCRIPT>

Then in the body is:

<table cellspacing="0" cellpadding="0" border="0" width="99%">
<tr>
<td align="center">
<img src="An_animation.gif" width="175" height="146" alt="">
<FORM NAME="navsel"
ONSUBMIT="pagejump(document.forms[0].whereto.options[document.forms[0].whereto.selectedIndex].value);
return false">
<SELECT NAME="whereto" ONCHANGE="pagejump(this.options[this.selectedIndex].value)">
<OPTION>Please select a name...</OPTION>
<OPTION value=".\pics\ANamed.gif"> Name</OPTION>
</SELECT>
</FORM>
</td>

AND so on X's 3, minus of course the cell property line, for 3 across the row on the page....

</tr>
</table>


Now this works great just as I want it to...gives me 3 animated image examples per row across the page...with a dropdown selection box under each one...with no need for a "go" or "submit" button.

It is those selection boxes that I would like to place on top of an image (in this case being the blank button image that matches my navigation buttons on the page) just for effect..as the background is plain white so the various animations all can be properly shown...so I just wanted to "dress it up" a bit. It is perfectly functional as is yes... I just would like to be able to make it a little more eye appealing instead of those plain selection boxes... :))

Again...TIA for any help offered... :))

Sharon...