IE7 image loads when it shouldnt

Question

Hi, I am building a site, and one of my pages is causing a bit of a problem in IE7. You can view the site here: www.vitaminjdesign.com/contact.html

I wrote a jquery script that basically loads a success image if the contact fields have an entry, and a fail icon when they are empty. It works perfectly in all browsers, but in IE7, an image placeholder is loaded. It doesnt dissapear until one of the icons is loaded. Just view the page in IE7 and you will see what I mean.

Im sure there is a CSS-only fix for this, but how do I remove those placeholder images in IE7?

Here is my jquery:

$(function(){
    $(':text,:textarea').bind('change, blur',function(){
        $(this).next('img').attr('src',this.value ? 'success.png' : 'fail.png');
    });
});

Answer 1

You could set display:none on them for starters, and then add $.show(); to the end of your chaining within the bind-event.

<img id="myIcon" style="display:none" />

--

$(":text,:textarea").bind("change, blur", function(){
  $(this).next("img").attr("src",(this.value ? "success.png":"fail.png")).show();
});

Answer 2

Give the images a placeholder image.

<img id="myIcon" src="path/to/placeholder.png" />