View Full Version : onMouseOver/Out: can it be changed using JS?

11-01-2004, 11:41 PM
This seems like it should be easy, but I am obviously missing something. I would greatly appreciate any insight anyone could offer.

Let's say I have a TableData object that looks like this when the page loads:

<td id="apptab" width="20%" bgcolor="white" class="cellbox" align="center" onMouseOver="this.style.background='blue'" onMouseOut="this.style.background='white'"> <b>App</b></td>

Is it possible to use JS to change the value of the onMouseOver and onMouseOut events? In other words, could I call a script from the onClick event of some other page element that would execute the following code, changing the properties of the onMouseOver event without reloading the page?


The above code does not work and I don't know why. It also does not return any error.

Thanks a bunch!

Willy Duitt
11-02-2004, 12:47 AM
If you are going to try to change the style properties use style (background-color) not bgcolor which was long ago deprecated....

Also, javascript uses the camelCase naming convention when referencing hyphenated properties.... EG: background-color == backgroundColor....

Lastly, it is onmouseover (lowercase) not onMouseOver (mixed case)... although most browsers will still properly assign, your pages will not validate for anything other than HTML 3.1 or whatever....

<td id="apptab" style="width:20%;background-color:white;text-align:center"
onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='white'"> <b>App</b></td>
<a href="#" onclick="document.getElementById('apptab').onmouseover=function(){alert('this is a new function')}">Change apptab onmouseover function</a>


11-02-2004, 06:50 PM
many thanks!