unable to load image using Javascript in IE 6

Question

Hi, I am trying to set source for Img tag using Javascript at button click. The problem which i m facing is that the I cannot see the Image in IE 6 but it works in FireFox. I browsed and tried few solutions like load the image in page load(Document load) itself or set a timer, but nothing works consistently. This problem also not consistent so unable to find the exact solution. the code goes here-

<li> <a id="lnk1" runat="server">
<img class="each_idea_icon" alt="" runat="server" id="imgAs" idea="images"  />                          
</a>
</li>

//on button client click
var imgAs = $('#<%=imgAs.ClientID %>');
imgAs.attr("src", "../../Common/Images/EN/ABC.png");

Can somebody tell me wat could be the issue. It works perfectly in IE. I have removed ">" or "<" so code can be visible.

by default in server side i set the image src.

Answer 1

Have you tried setting it first to a blank/clear gif or image file? Sometimes it has a hard time setting the img src, if it did not have an image initially.

Answer 2

I beleve i know what is your problem , for some reason when u use <img ... /> insted of <img ..> </img> in some cases it does not work

Answer 3

Try using

imgAs.setAttribute ( "src" , "../../Common/Images/EN/ABC.png" );

See

element.setAttribute

Answer 4

Try an image that is not a png, ie6 and png's never played nicely. You need some ie specific code to get them to work properly.

Answer 5

I too had the same problem and the below code fixed it:

var imgAs = $('#<%=imgAs.ClientID %>');
var imgParent = img.parentNode;

imgParent.innerHTML = "<img src='/_layouts/images/minus.gif' id='" + img.id + "' alt='" + img.alt + "'></img>";

I assigned the HTML string to innerHTML of its parent element.

Hope this helps!