Click to See Complete Forum and Search --> : does anyone know how to make image rollovers in layers


joer
09-09-2003, 10:07 AM
Hi, I know DHTML pretty good. Im having an issue referencing an image in a leyr using Netscape 4, and 6. In IE i can just use document.all. I know Netscape 4 uses document.layers, and netscape 6 uses document.getElementById. My problem is if a table has a rollover image, i can refer to document.images. What if these images are in div layers, how should my rollover fxns reference them.

if(document.images){
subnavabout1off=new Image();
subnavabout1off.src="images/layer/accomplishments_off.gif";
subnavabout1on=new Image();
subnavabout1on.src="images/layer/accomplishments_on.gif";
subnavabout2off=new Image();
subnavabout2off.src="images/layer/pressroom_off.gif";
subnavabout2on=new Image();
subnavabout2on.src="images/layer/pressroom_on.gif";
subnavabout3off=new Image();
subnavabout3off.src="images/layer/testimonials_off.gif";
subnavabout3on=new Image();
subnavabout3on.src="images/layer/testimonials_on.gif";

}

the fxns that call these images

I need to get the rollovers to work in netscape 4, netscape 6, and ie div layer tags

function imageOn(name,bn){
if(document.images){
loc=name + bn;
document[loc].src=eval(name + bn + "on.src");
}
}
//End rollover functions for all rollover images on position

//Begin rollover functions for all rollover images off position
function imageOff(name,bn){
if(document.images){
loc=name + bn;
document[loc].src=eval(name+ bn + "off.src");
}
}

requestcode
09-09-2003, 11:10 AM
I know for NS4 you also have to reference the div name like this:
document.div_name.document.image_name.src="img.gif"

For NS6 you might try that.

joer
09-09-2003, 12:08 PM
thx :D I ended up having to get the layer object for netscape 4, and had a case statement for ie, and ns6/7. These use document.images, but for nn4, i needed to reference the layer first. Appreciate your help.

function getImageOfLayer(id) {
// This function checks for DOM strategy, then returns an object reference.
if (document.all) {
return document.all[id];
}
else if(document.layers) {
return document.layers[id];
}
else if (document.getElementById){
return document.getElementById([id]);
}
}

function imageLayerOn(lyrname,name,bn){
var imageElement = getImageOfLayer(lyrname);
if (document.all || document.getElementById) {
if(document.images) {
loc=name + bn;
document[loc].src=eval(name + bn + "on.src");
}
} else {
if(imageElement.document.images){
loc=name + bn;
imageElement.document[loc].src=eval(name + bn + "on.src");
}
}
}

function imageLayerOff(lyrname,name,bn){
var imageElement = getImageOfLayer(lyrname);
if (document.all || document.getElementById) {
if(document.images) {
loc=name + bn;
document[loc].src=eval(name + bn + "off.src");
}
} else {
if(imageElement.document.images){
loc=name + bn;
imageElement.document[loc].src=eval(name + bn + "off.src");
}
}
}