Wednesday, March 19, 2008

Dynamically changing img src doesn't always show new image with Internet Explorer 6

When you dynamically change the source of an image with Javascript, Internet Explorer 7 and Firefox will display the new image fine. But sometimes, I believe when the change was triggered from an event, the image won't display in Internet Explorer 6 after the change. A blank area will appear where the image should be (if you specify a width and a height for the image), and if you right click on the area and click Show Picture, the image will display. I really have no clue why IE6 behaves this way. I found a posting at http://blogmatrix.blogmatrix.com/:entry:blogmatrix-2006-10-15-0000/ that lists two solutions. A third solution, described in Comment #1, is the easiest solution though. Simply return false in the event that triggers the change. Example:

Say you have an onClick event in a link to change a different image on the page. Your code should be:

<a href="javascript:void(0)" onClick="changeImage(); return false;">Change Image</a>

The return false will make the image always display in IE6.

2 comments:

Anonymous said...

Thanks a lot!

Anonymous said...

Thanks, works a treat!