Question

I have an image displaying using the jquery. When mouse over to that image, I like the mouse to change to be clickable and when clicked, I like to load another image. This is my code and not working. Any ideas?

html code:

jquery code:

$("#div1").click(function () {
    var img_cpu = "http://192.168.101.1/cpu.png";
    var myImage = new Image();
    $(myImage).load(function () {
        $("#div2").html(myImage)    
    }).error(function () {
        $('#div2').hide();
    })
    .attr('src', img_cpu)
});

Answer 1

some issues occurred

• you created a new image var myImage = new Image(); but you didn’t specified a src later (so load event never triggers)

• myImage32 is not defined anywhere in your code

furthermore be sure that cpu.png

• is inside the same folder
• has minimum permission (644) to be viewed
• is not already cached, otherwise load event could never occur: in this case you should check for complete property and trigger the handler defined for load event (see snippet below)

---

 $(myImage).one('load', function () {   /* use one() */
     $("#div2").html(myImage32)    
 })
 .attr('src', img_cpu);

 if (!!myImage.complete) $(myImage).trigger('load');