sententia
Home    Blog
Home  /  Blog  /  Changing Image SRC property doesn't work in IE6

Changing Image SRC property doesn't work in IE6

My basic code looks like this:

<a href="javascript:void(0)" onclick="chgFolder('imgFolder');">
 <imgid="imgFolder" alt="" src="./images/folder_closed_yellow.png" height="40" border="0">
</a>

My JS function:
<script type="text/javascript">
function chgFolder(inFolderId){
var myImg = document.getElementById(inFolderId);
myImg.src='./images/folder_open_blue.png';
}
</script>

Basically I needed to force IE6 to load an image so I added a "return false" to the event
onclick="chgFolder('imgFolder'); return false;" 

After much searching I came across this thread that led me to the solution



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,



  #2    
   
reynardmh@gmail.com
 
Posts: n/a
 Re: changing image src property does not work in IE? - 06-07-2006 , 01:26 PM




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};
}



  #3    
   
Elegie
 
Posts: n/a
 Re: changing image src property does not work in IE? - 06-07-2006 , 03:53 PM

reynardmh (AT) gmail (DOT) com wrote:

Hello,

Quote:
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,

<span onclick="change_pic('foo')">


Quote:
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[img].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