Javascript: enable/disable button with mouseover/mouseout help

Question

Ok..this should be pretty straightforward:

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled=false;">

if i mouseover this button, it gets disabled..yay! But now when I mouseout, it doesn't get enabled...boo.

I understand the concept of disabling it means you can't do anything with it. But, how do you get it to be enabled with a mouseout? Is it possible? Am I having a brainfart and am missing something? this should be quite easy.

Thanks!

Answer 1

You should set the mouseout to disabled = '' instead.

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled='';">

The disabled property only looks to see if it's there at all. You can set disabled='anything' and it will be disabled. It used to be that you only needed the keyword disabled in your attributes but for valid XHTML you need to set every attribute equal to something.

EDIT: I played around with this a little bit and added some padding to the SPAN tag and it allows the events to work properly. Without padding, it's not trapping the events because the input button is disabled. I just made the background red so it was easy to see the area the SPAN used up.

<span style="padding: 8px; background: red;"  onmouseout="this.firstChild.disabled='';"><input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;"></span>

Answer 2

you could have an outer element that surrounds it and have an onmouseover for that outer element that enables the inner element.