onmouseover change css class

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>

HTML:

But this does not work, any ideas?

Cheers,
Adam

 

This will work only if you have a global variable that points to the 'remote' object. Something like this:

var remote = document.getElementById('remote');

Code (markup):

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';"/>  
...

Code (markup):

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

 

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".