Hi there,

There are at least three solutions to solve this (not cross browser, but so 
isn't getElementById ;-))

1. Define two classes: div.menuOpt1 and div.menuOpt1Over. In the second 
class, just set / override the background-image: url property to the 
desired image. Then in the onMouseOver set the className of the element 
menuOpt1 to menuOpt1Over

2. Use an onmouseover and -out with methods:

<div class="menuOpt2" id="menuOpt2" onmouseover="testMe()" 
onmouseout="testMe2()"><a href="index.html" class="menu">Home</a></div>

Then, in JavaScript use these two methods:
function testMe()
{
         document.getElementById("menuOpt2").style.backgroundImage = 
'url(2.gif)';
}
function testMe2()
{
         document.getElementById("menuOpt2").style.backgroundImage = 
'url(1.gif)';
}

The key thing to note here is that you have to set backgroundImage instead 
of background. It also expects an url instead of just a string with the 
file name. If I am not mistaken, here is how to "translate" a CSS property 
to a JavaScript property:

         1. Remove all the - symbols
         2. Capitalize every word except for the first. So background-image 
in CSS becomes backgroundImage in JavaScript.

3. Use inline events with the "this" keyword:
<div class="menuOpt1" id="menuOpt1" 
onmouseover="this.style.backgroundImage='url(2.gif)'" 
onmouseout="this.style.backgroundImage='url(1.gif)'" ><a href="index.html" 
class="menu">Home</a></div>

"This" refers to the current element, the div. It uses the same script to 
change the background as in the second example.

HtH



Imar



At 01:31 PM 9/5/2002 +0100, you wrote:
>Hi everyone (this is my first post here, wish me luck :-)  )
>
>I have a menu area containing, for example:
><div class="menuOpt1" id="menuOpt1"><a href="index.html" class="menu"
>">Home</a></div>
>
>and a stylesheet:
>div.menuOpt1
>         {       position: absolute;
>                 top: 0px;
>                 left: 389px;
>                 height: 80px;
>                 width: 105px;
>                 overflow: hidden;
>                 font-weight: bold;
>                 color: rgb(168,190,188);
>                 background-image: url(collage1.gif);
>                 }
>
>which displays a background image which I want to change on mouseover.
>
>I've tried all kinds of: onMouseOver="el 
>document.getElementById('menuOpt1'); el.style.background.src='collage2.jpg';
>
>.. and it doesn't work, sometimes with an error (assignment) or not.  I've
>tried layer-background-src, layer-background-image, background-image, et al,
>and it just doesn't work.
>
>Of course I could change the text link to a graphic, then accessing the
>image is easy.  But I'd rather the text be in the same style as the rest of
>the page, so what I'm trying is preferred.
>
>Anyone any solutions?
>
>Cheers
>J
>
>
>---
>
>Improve your web design skills with these new books from Glasshaus.
>
>Usable Web Menus
>http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
>r-20
>Constructing Accessible Web Sites
>http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
>r-20
>Practical JavaScript for the Usable Web
>http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
>r-20