onmouseover change css class

[adamjblakey]

Hi,

What i want to do is when i mouseover an image it changes the class of a div that is somewhere on the page.

I thought i could do this by doing:


<div class="header_image2" name="remote" id="remote">
<div id="header_image2_inner">
<img src="images/composite-decking-sm.JPG" height="75" hspace="2" border="0" onmouseover="remote.className = 'composite1';" onmouseout="remote.className = 'header_image2';"/>
</div>
</div>


But this does not work, any ideas?

Cheers,
Adam

[xlcho]

This will work only if you have a global variable that points to the 'remote' object. Something like this:
var remote = document.getElementById('remote');
This is the first way to do it. The second one is to change the code you've written to:
...
<img src="images/composite-decking-sm.JPG" height="75" hspace="2" border="0" onmouseover="document.getElementById('remote').className = 'composite1';" onmouseout="document.getElementById('remote').className = 'header_image2';"/>
...

Your code doesn't work, cause when you write just 'remote' the script searches for a variable with that name..

[joebert]

If you plan on using that exact HTML, and don't plan on changing anything about that section any time soon, you could also use "this.parentNode.parentNode" instead of "remote".