Jquery + click + image swaps + IE6 = I hate that browser

Question

I am having an issue with swapping images in IE6. Works fine in all browser except that one.

Here is the following code:

$(function() {
   $("#image1").click(function() {
       $(this).attr('src', '/v12/images/small/sm-wall-1-on.png');                    
       $('#image2').attr('src', '/v12/images/small/sm-wall-2.png');  
       $('#image3').attr('src', '/v12/images/small/sm-wall-3.png'); 
   });
 });

Then here is the HTML

<li style="padding:3px;"><img id="image1" src="/v12/images/small/sm-wall-1-off.png" style="border:0px; width:95px; height:75px;" class="pngfix" alt=""  /></li>
<li style="padding:3px;"><img id="image2" src="/v12/images/small/sm-wall-2-selected.png" class="pngfix" style="border:0px; width:95px; height:75px;" class="pngfix" alt="" /></li>
<li style="padding:3px;"><img id="image3" src="/v12/images/small/sm-wall-3.png" class="pngfix" style="border:0px; width:95px; height:75px;" class="pngfix" alt=""  /></li>

So basically if I click on one of the images I want to swap out the others along with the one I just clicked. IE6 hides all images as soon as I perform the click.

Thoughts?

Answer 1

google is your friend:

http://wolfram.kriesing.de/blog/index.php/2007/change-img-src-for-ie

it seems to be a problem in IE that is widely known.

my search terms: ie changing img src

Answer 2

Instead of using the img tags, you could use a span with a CSS class containing the background-image attribute, then have your click function just change the class.

Basically, the same concept as CSS Sprites, but instead of changing the position of the background image, you change the URL. I've used it before in IE6, and it worked fine.