Using onMouseOver/onMouseOut in a form

[dreaming of nascar]

I want to make my buttons change when the mouse is over them. This is very easy to do, but I cannot figure out how to make this happen within a form. I want the button I created to submit the form and have the onMouseOver and onMouseOut effect. I am not sure how to do this. Any help would be appreciated. Thanks

dreaming of nascar

[HocusPocus]

U could, though I wouldn't, call a function that submits the form from an <A HREF,

eg,

<form name=theform>

...
form fields
...

<A Href="javascript:document.theform.submit()">
<img of submitbutton mousey stuff>
</a>

</form>

Doing this your relying on people to have JavaScript enabled (most do) and have a modernish browser.

[dingman]

Perhaps for slightly greater safety you could do something like this:

<span id="normalButton"><input type="submit" /></span>
<span id="fancyButton" style="display: none;">
<a href="" onMouseOver="someFunction()"
onMouseOut="otherFunction()"
onClick="document.thisForm.submit()">submit</a></span>

<script type="text/javascript">
var n = document.getElementById('normalButton');
var f = document.getElementById('fancyButton');

if (n && f)
{
f.style.display = 'inline';
n.style.display = 'none';
}
</script>

That's completely untested off-the-cuff code from someone who doesn't do DHTML very often. Look at it more as pseudo-code than something you can cut-and-paste.

The idea is to provide a normal button in case JS is turned off or unavailable (cell phone browsers come to mind), but if JS is there you can hide the basic button and display your fancy one instead.

[edited by: tedster at 5:48 am (utc) on Feb. 14, 2003]

[c3oc3o]

<form...>
...
<input type="image" name="submitbutton" src="mybutton.gif" border="0" onmouseover="this.src='mybutton_highlighted.gif'" onmouseout="this.src='mybutton.gif'" />
</form>

[HocusPocus]

c3oc3o,

Didn't realise that could be done, a good neat method.

Still Learning new stuff after 5 years, me.