changing image src property does not work in IE?

Discussion in 'Javascript' started by reynardmh, Jun 7, 2006.

  1. reynardmh

    reynardmh Guest

    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 and Opera 8.52

    Here is the simplified code:

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

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

    reynardmh, Jun 7, 2006
    1. Advertisements

  2. reynardmh

    reynardmh Guest

    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};
    reynardmh, Jun 7, 2006
    1. Advertisements

  3. reynardmh

    Elegie Guest


    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,

    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]) {
    } else {
    tmp=new Image();
    tmp.onload=new Function("document.images['"+img+"'].src='"+p+"'");
    tmp.src=p+"?"+new Date().getTime();

    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".

    Elegie, Jun 7, 2006
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.