changing image src property does not work in IE?

[reynardmh]

I tried to change the image.src on the fly when the user click a link.
But for some reason it does not work in IE 6 (the image just disappear
when I click the link), but if I add the alert('test') line on the
change_pic function it works in IE. it's like IE just didn't refresh
the display with the new image. Btw, the code works fine on Firefox
1.5.0.4 and Opera 8.52

Here is the simplified code:

<script type="text/javascript">
function change_pic(p) {
document.images._pimg.src = p;
// alert('test');
}
</script>

<img name="_pimg" src="image.jpg" >

<a href="javascript:;" onclick="change_pic('image.jpg')">image</a>
<a href="javascript:;" onclick="change_pic('image2.jpg')">image 2</a>

thanks,

 

[reynardmh]

ok, I think I just solved my own problem seems like IE does not
display the image if it's not loaded yet, so here is the solution.

function change_pic(p) {
img = new Image();
img.src = p;
img.onload = function() {document.images._pimg.src = img.src};
}

 

[Elegie]

(e-mail address removed) wrote:

Hello,

<a href="javascript:;" onclick="change_pic('image.jpg')">image</a>

This construct exhibits two issues:

[1] it uses the "javascript:" pseudo-protocol in an incorrect way;
originally this pseudo-protocol was used to display javascript string
values on the screen, but in your case there happens to be nothing to
display, so the user agent (if javascript-enabled) might get confused if
requested to run the link

[2] the ONCLICK handler does not return false, therefore telling the
browser to navigate to the resource identified by the HREF attribute. In
your case, you definitely don't want that, all the more that you don't
have any resource to navigate to; you want to prevent the default
behavior by returning false.

I therefore think that it would be better to use:

<a href="foo.html" onclick="change_pic('foo'); return false">

or, if you don't have a page to navigate to,

ok, I think I just solved my own problem seems like IE does not
display the image if it's not loaded yet, so here is the solution.

function change_pic(p) {
img = new Image();
img.src = p;
img.onload = function() {document.images._pimg.src = img.src};
}

In such a perspective, I'd prefer something like the following,
separating the load from the display (note that it could be separated
further, in two distinct script contents), and parameterising the image
name as second argument (among other things).

---
var change_pic = (function(){
var sources=new Object();
return function(p, img) {
var tmp;
if(sources[p]) {
document.images.src=p;
} else {
tmp=new Image();
tmp.onload=new Function("document.images['"+img+"'].src='"+p+"'");
tmp.src=p+"?"+new Date().getTime();
sources[p]=true;
}
}
})();
---


However, I am not sure the reason you invoke is the correct one; I think
that the link defaulting to the pseudo-protocol "javascript:" is a more
probable candidate for your issues. Please change the HREF attribute for
javascript-disabled agents and definitely add a "return false".

HTH