Problem with some browsers when changing a displayed image

[Tim Streater]

I have a small image on my web page that, when clicked, does some
javascript stuff which changes the page. To highlight that this has
happened, I want to replace the image with another. Each is a 16x16
pixel image.

The images are pre-loaded:

var image_g = new Image (16, 16);
var image_r = new Image (16, 16);
image_g.src = 'pics/arrow-g.jpg';
image_r.src = 'pics/arrow-r.jpg';


Then later when the user clicks on the image, I do (e.g.) this:

document.getElementById('pixie').src = image_g.src;

where pixie is an <img> in an <a href> in a table cell.

This works fine in Safari, IE (Mac and XP), Netscape 7 (XP), and FireFox
2.0.0.1 (Mac). However it does not work in Netscape 6 (XP) and FireFox
2.0 (XP). The behaviour is as if the statement were commented out - I
get no Javascript errors, but the statement is ignored.

Am I somehow missing something which would make this completely standard
JS? Any clues appreciated.

Thanks,

-- tim

 

[Tim Streater]

Why not the following?
document.getElementById('pixie').src = 'pics/arrow-g.jpg';

That doesn't actually work either. According to Danny Goodman's JS
Bible, I should do what I am doing - in particular since sometimes I
want to assign it to image_r.src.

Today I discover that this *does* work in FireFox 1.5.0.9 under XP, but
not 2 or 2.0.0.1 under XP. So I'll downgrade on the XP machine for the
moment (if I can find it to 1.5.0.9.

or

document.images['pixie'].src = 'pics/arrow-g.jpg';
// provided you have named your image space.

Nor familiar with this so I'll check in it. Thanks.

-- tim

 

[Tim Streater]

I have a small image on my web page that, when clicked, does some
javascript stuff which changes the page. To highlight that this has
happened, I want to replace the image with another. Each is a 16x16
pixel image.

The images are pre-loaded:

var image_g = new Image (16, 16);
var image_r = new Image (16, 16);
image_g.src = 'pics/arrow-g.jpg';
image_r.src = 'pics/arrow-r.jpg';


Then later when the user clicks on the image, I do (e.g.) this:

document.getElementById('pixie').src = image_g.src;

Why not the following?
document.getElementById('pixie').src = 'pics/arrow-g.jpg';

or

document.images['pixie'].src = 'pics/arrow-g.jpg';
// provided you have named your image space.

Nope. behaves identically.

-- tim

 

[VK]

I have a small image on my web page that, when clicked, does some
javascript stuff which changes the page. To highlight that this has
happened, I want to replace the image with another. Each is a 16x16
pixel image.

The images are pre-loaded:

var image_g = new Image (16, 16);
var image_r = new Image (16, 16);
image_g.src = 'pics/arrow-g.jpg';
image_r.src = 'pics/arrow-r.jpg';

That is the key question I say _if_ they are preloaded. Image object
was added in Netscape 3.0 to better support newly introduced roll-over
effect: namely to avoid loading delays when passing for the _first
time_ over some roll-over image. On the second and any feature pass it
was irrelevant if you pre-loaded image or not: in either case it would
go w/o delay from the browser cache (I'm talking about conventional
images sent with no tricky response headers).
This way
var img = new Image();
img.src = 'path/to/image';
would mean "enforce loading and caching this image file"

This techniques was later adopted by IE 4 and others - but no one
AFAICT ever promised that forcing to cache something in such way will
work forever. So possibly on recent UAs Image functionality was
considered as not matching modern security and annoyance protection -
if it is indeed so then I could name at least several reasons. So
possibly extra cache-related functionality from Image object was
removed and now it is as abstract as:
var img = {
"src" : "path/to/image"
}

I am not using graphics roll-overs since about 2003, so I can say
nothing for sure. Some testing to check it out would be great.