adding a z-index

I am using a simple java script for rollovers but I need to add z-idex when I rollover. How do I code this?

var ns4 = (document.layers);
var ie = (document.all);
var ns6 = (!document.all && document.getElementById);


if (document.images) {
  
  // menu
  image1on = new Image();
  image1on.src = "/images/menu/learn_more_on.jpg";    
  
  image1off = new Image();
  image1off.src = "/images/menu/learn_more_off.jpg";

}

function turnOn(imageName) {
  if (document.images) {
    document[imageName].src = eval(imageName + "on.src"); 
   //set z-index here?
  }  
}

function turnOff(imageName) {
  if (document.images) {
    document[imageName].src = eval(imageName + "off.src");
  }
}

Code (markup):

 

ok, I tried something like this but it doesn't work.

function turnOn(imageName) {
  if (document.images) {
    document[imageName].src = eval(imageName + "on.src");   
    this.style.zIndex = "999";      
  }  
}

Code (markup):

I also tried inline on the mouseOver:

onMouseOver="turnOn('image1'); this.style.zIndex = "999"; " onMouseOut="turnOff('image1')"

Code (markup):

with no luck.

Any ideas?

 

Have you checked the error console?
Maybe you can try making it the way you want through css only and see if z-index works on the image as you wish. Another interesting thing is that you seem to want to add a high z-index to the mouseover event, but if the image is already behind something it won't react to the mouseover at all. Try to add this line inside the function:

alert('call');

Then you will know if the function is called at all (which it doesnt seem to be at the moment)

GL