Image does not display in IE

Question

The following code example is used; images are not displayed in any version of IE.

HTML code:

<div class="container" style="text-align:center;"> <ul class="thumb"> <li style="height:220px; padding: 0 40px 0 0; overflow:visible; position: relative;"> <img width="246px" height="208px" src="images/about4.jpg" alt="Biomimetic and Biological Materials"/> </li> </ul> </div> 

JQuery

 <script type="text/javascript"> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '600px', height: '400px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '246px', height: '208px', padding: '5px' }, 400); }); //Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script> 

Am I doing something wrong? thanks:)

Answer 1

It working .. also in IE ..

http://www.jsfiddle.net/antiflu/GWyAg/

What is your problem?

Answer 2

Try putting “swap on click” in the click handler inside $(document).ready(function() { to make sure it is bound when the DOM is ready to handle JavaScript.

Answer 3

Look at your layout and the reference code you are looking for:

 $("ul.thumb li a") 

but under "ul.thumb li" you only have the tag "img" and not "a".

Maybe this is the problem.