Dynamically updating the zindex of an object

I realize that this should be simple, but I'm stumped.

I have two images on a page. I've used CSS and absolute positioning to
position the images so that one partially obscures the other. One image
has a zIndex of 3, the other 4.

I need to have an onmouseover event for the rear image which increases
its zIndex so that it moves in front of the front image. I also want to
switch this back onMouseOut.

Here is the function I'm working with________________________
function setZ(id, z) {
var IE4 = (document.all) ? true : false;
var NS4 = (document.layers) ? true : false;
if (IE4)
{eval("document.all." + id).style.zIndex = z;}
else
{eval ("document." + id).zIndex = z;}
}

Here are the relevant CSS styles___________________________
#firstImg {position: absolute; z-index: 3; left: 160px; top: 170px;}
#secondImg {position: absolute; z-index: 4; left: 307px; top: 281px;}

Here is the HTML________________________________________
<img id="firstImg" name="firstImg" src="images/front_small.jpg"
onmouseover="setZ('firstImg',10)"
onmouseout="setZ('firstImg',3)" >

<img id="secondImg" name="secondImg" src="images/back_small.jpg">



This works perfectly fine in IE, but no matter what I've tried, I can't make
it work in NN.

I would greatly appreciate it if anyone has the solution for this.

Thanks,
browni

all you have to do is use this coding...

window.document.object.style.z-index=0;
or
window.document.all.divlayer.style.z-index=0;

hope this helped

colton22