changing backgroundImage in Firefox

[mvdn]

Hi,

I have a problem with a simple piece of code that works in IE, Safari, Chrome, but not in FF

In my HTML i have a DIV:

<div id="menuDIV"> div contents </div>
with accompanying CSS
.twoColHybLtHdr #menuDIV {
width: 370px;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 10px;
height: 210px;
top: 180px;
margin-bottom: 5px;
background-position: left top;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #6F0;
border-right-color: #6F0;
border-bottom-color: #6F0;
border-left-color: #6F0;
background-repeat: no-repeat;
background-image: url(/images/menu_background.png);
}



I want to change the background to this div through a script which activates from a click on a table cell:

<td onclick="LI_nav_frames('p2_main.html','p2_side.html','/images/topvisual_p2.png');" > some text </td>

The first two parameters load html-files in iFrames, they work OK, it is the third, the image that works in all browsers except FF:

function LI_nav_frames (url1, url2, image){

top.Main_frame.location.href= url1;
top.Side_frame.location.href= url2;
top.menuDIV.style.backgroundImage='url('+image+')';
}

Would be gratefull for any clues...

MvdN

[subexpression]

It looks like it should work.
Is the path to the image correct?

Try removing the leading forward slash in the LI_nav_frames' argument list:
'images/topvisual_p2.png'

[mvdn]

Thanks, but no, changed it to "..images/topvisual_p2.png" , does not work...
(can't do without the "../" )

[subexpression]

mvdn,

A lot of times, the root path "/images" won't work locally when your developing.
But, it's a great way to keep the ../../ relative path confusion to a minimum.

Have you tried uploading your files to a web host?

[mvdn]

Hi,

I am working on a server....

[rocknbil]

First, what is "top"? A target frame?

Give something like this a go.

if (top.document.getElementById('menuDIV')) {
top.document.getElementById('menuDIV').style.background='url('+image+')';
}
else { alert('div not found'); }

The if/else will tell you a lot. Just remove else once you get it debugged.

backgroundImage should work as well.

[mvdn]

Hi rocknbil,

Baffling, this works.
I had been trying:

var el= document.getElementById('menuDIV');
el.style.background='url('+image+')';

but that gives back that i'm referring NULL. Must be the addition of 'top' that does it.

Thanks a lot for all replies.

MN

[rocknbil]

Right, you didn't tell us what "top" is, but it's obviously a frame, iframe, or element that can contain a document. :-)

[mvdn]

Ha, you are right, I did not. But "top" is not an iFrame. As far as I understand "top" is the way you can refer to the root of the tree of windows/frames...

MN

[rocknbil]

<smacks forehead> Feelin' real smart ATM. I don't use frames much any more, assumed it was a named object. For those reading,

[w3schools.com...]