script not working in IE7 and 8 but fine in any other broswer...why?!

[Violet_82]

peeps, given the following markup

<link rel="stylesheet" type="text/css" href="assets/style_images.css"><!-- MY CSS -->
<script type="text/javascript" src="assets/big_images.js"></script>
        <div class="car_model_description">
            <div class="compare_button">
                <a href=#><img src="assets/compareBTN.png" alt=""></a>
            </div>
            <p id="caption">Default text</p>          
        </div>   
        <div class="image_container">
            <img src="wathever.jpg" alt="" id="placeholder_image" >
            <img src="wathever1.png" alt="" class="image_invisible">
            <IMG SRC="wathever2.png" alt="" class="image_invisible">
            <IMG SRC="wathever3.png" alt="" class="image_invisible"><!--to change -->
            <IMG SRC="wathever4.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever5.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever6.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever7.png" alt="" class="image_invisible">
            <IMG SRC="wathever8.png" alt="" class="image_invisible">
            <IMG SRC="wathever9.png" alt="" class="image_invisible">
            <IMG SRC="wathever10.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever11.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever12.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever13.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever14.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever15.png" alt="" class="image_invisible">
        </div><!-- END OF image_container -->
        <div class="thumbnails"> 
            <ul class="thumbs_columns">
                <li>
                    <ul class="thumb_rows">
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb.png" alt="iQ" onclick="changeImage('wathever.png','&lt;h3&gt;iQ&lt;/h3&gt;some text')">iQIST</a></li>
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb1.jpg" alt="PRIUS" onclick="changeImage('wathever1.png','&lt;h3&gt;Prius&lt;/h3&gt;some text1')">Pri</a></li>
                    </ul>
                </li>

                <li>
                    <ul class="thumb_rows">
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb2.png" alt="AYGO" onclick="changeImage('wathever2.png','&lt;h3&gt;AYGO&lt;/h3&gt;some text2')">AYGO</a></li>
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb3.jpg" alt="Prius Plug-in" onclick="changeImage('wathever3.png','&lt;h3&gt;Prius Plug-in&lt;/h3&gt;some text3')">Plug-in</a></li>
                    </ul>
                </li>

                <li>
                    <ul class="thumb_rows">
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb4.jpg" alt="ALL NEW YARIS" onclick="changeImage('wathever4.png','&lt;h3&gt;The hEY&lt;/h3&gt;some text4.')">me</a></li>
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb5.png" alt="Prius+" onclick="changeImage('watheve5.png','&lt;h3&gt;Prius+&lt;/h3&gt; some text5.')">me +</a></li>
                    </ul>
                </li>


            </ul>
            <div class="clear"></div>
        </div><!-- END OF THUMBNAILS -->

and the following external script

function changeImage(image,caption){
    var newImage=document.getElementById("placeholder_image");
    document.getElementById("caption").innerHTML=caption;
    newImage.src=image;

}

could anybody let me know why this wouldn't work in IE7 and 8? It is fine in every other browser but in IE7 and 8 the script doesn't run, and the images don't change. #
Basivcally when I click on a thumbnail the big image (the placeholder) gets replaced with whatever is passed as a paramenter to the javascript function as well as the paragraph
Has anybody got a clue? No error or warning is given

thanks

[pritaeas]

Do you have this available online ?

[Violet_82]

I have now, http://antobbo.webspace.virginmedia.com/various_tests/toyt/test.htm
I knocked this up quickly and in this case it is not working in IE at all (7,8,9).
Ither browsers are fine. Any idea at all?
I might also need to add some jquery at some point to handle the fade, I will give it a go

[Violet_82]

As said before I needed to add some fade to it: when I click on the image I want the big image to fade in nicely, so I modified my script to be

function changeImage(image,caption){
    var newImage=document.getElementById("placeholder_image");
    document.getElementById("caption").innerHTML=caption;
    $('#'+ newImage).attr('src','image').fadeIn();  

}

thinking I could change the src property of the script with the attr() method. I don't want to cause confusion, so if you think it is better to open a separate thread I will put this in there
thanks

[pritaeas]

Hmz... "Unknown runtime error", interesting.

As for the fade, it doesn't work because first you change the source on a visible element, and then try to fade it in. It does work if you fade in a non-visible element. Perhaps part of my demo here will help.

[Violet_82]

thank I will have a look at that and post back if any problem.
About the runtime error, shouldn't I get that on other browsers as well as IE's? What do you think it is causing IE's to behave like that?
thanks

[pritaeas]

I have no clue. Some threads say you can't set innerHTML in IE. I suggest you use the jQuery html() function for it.

[Violet_82]

really?! Gosh, I am sure I have used innerHTML before in IE's. Ok thanks for that