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','<h3>iQ</h3>some text')">iQIST</a></li>
<li><a href="JavaScript:void(0);"><IMG SRC="thumb1.jpg" alt="PRIUS" onclick="changeImage('wathever1.png','<h3>Prius</h3>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','<h3>AYGO</h3>some text2')">AYGO</a></li>
<li><a href="JavaScript:void(0);"><IMG SRC="thumb3.jpg" alt="Prius Plug-in" onclick="changeImage('wathever3.png','<h3>Prius Plug-in</h3>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','<h3>The hEY</h3>some text4.')">me</a></li>
<li><a href="JavaScript:void(0);"><IMG SRC="thumb5.png" alt="Prius+" onclick="changeImage('watheve5.png','<h3>Prius+</h3> 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