image rollover using css and javascript; please help!

liunx

Guest
I want to target a named <div> object so that I can change it's current style class. The div classes consists of background images which I am trying to rollover.<br />
<br />
I created some classes in the sub-objects(in bold) of the <div> object like so...<br />
_______________________________________________________<br />
<HEAD><br />
<style><br />
div.div00.navbar_off {background-image: url(images/image00off.jpg);}<br />
div.div00.navbar_on {background-image: url(images/image00on.jpg);}<br />
div.div01.navbar_off {background-image: url(images/image01off.jpg);}<br />
div.div01.navbar_on {background-image: url(images/image01on.jpg);}<br />
</style><br />
</HEAD><br />
_________________________________________________________<br />
<br />
Then I created the actual div objects which are to be manipulated by mouseover event handlers, like this...<br />
_________________________________________________________<br />
<br />
<BODY><br />
<div class="div.div00.navbar_off" name="div00" onmouseover="div.div01.className='div.div01.navbar_on'"></div><br />
<div class="div.div01.navbar_off" name="div01"></div><br />
</BODY><br />
_________________________________________________________<br />
Above, I want to rollover div00 and change the class of div01.<br />
By giving each <div> its own name, I thought I could target its className property. I also thought that each div in a document was a sub-object of the <div> object.(am I wrong?)<!--content-->remember to use the STYLE object.<br />
<br />
<br />
e.g. divName.style.className = ...<!--content-->
 
Back
Top