Hi there, on one of my pages I am working on http://www.antobbo.webspace.virginmedia.com/photography/category_1.htm I have a script which works in firefox, opera but it doesn't in chrome and IE.
Now, let me explain first what the script is supposed to do. On the above page if you click on the second thumbnail image the main image changes (and the thumbnail itself changes): then if you click on the third thumbnail the main image changes again as well as the thumbnail, and I was thinking to do the same with the rest of them.
This is the script and the function is called with an onClick from the bullet list:
...
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
function changeThumbnail_2()
{
var shaded_image = 'images/thumbnail_2_shaded.jpg';
document.thumbnail_3.src= 'images/thumbnail_3.jpg';
document.thumbnail_2.src= shaded_image;
var pic_2 = 'images/category_1_picture_2.jpg';
$(document).ready(function(){
$("#pic_1").fadeOut(1000, function(){
$(this).attr("src", pic_2).fadeIn(1000);
});
});
}
/* CHANGE THUMBNAIL 3*/
function changeThumbnail_3()
{
var shaded_image_3 = 'images/thumbnail_3_shaded.jpg';
document.thumbnail_2.src = 'images/thumbnail_2.jpg'
document.thumbnail_3.src= shaded_image_3;
var pic_3 = 'images/category_1_picture_3.jpg';
$(document).ready(function(){
$("#pic_1").fadeOut(1000, function(){
$(this).attr("src", pic_3).fadeIn(1000);
});
});
}
//-->
</script>
</head>
...
<body id="page_body">
...
<div class="thumbnails_wrapper"> <!--THUMBNAILS WRAPPER -->
<ul>
<li><a href="#"><img src="images/thumbnail.jpg" alt=" "></a></li>
<li onClick="changeThumbnail_2()"><img src="images/thumbnail_2.jpg" alt=" " id="thumbnail_2"></li>
<li onClick="changeThumbnail_3()"><img src="images/thumbnail_3.jpg" alt=" " id="thumbnail_3"></li>
</ul>
<ul>
<li><a href="#"><img src="images/thumbnail_4.jpg" alt=" "></a></li> <!-- I don't need style="border:0;" because I put that in the overall settings in the container.css -->
<li><a href="#"><img src="images/thumbnail_5.jpg" alt=" "></a></li>
<li><a href="#"><img src="images/thumbnail_6.jpg" alt=" "></a></li>
</ul>
</div> <!--END OF THUMBNAILS WRAPPER -->
</body>I know that the code is a clunky (I am still a very beginner) but it works ok except in chrome and IE. I think I know where the error is because when I open the page in chrome and run the developer tool -> script tab I get an error for this line document.thumbnail_3.src= 'images/thumbnail_3.jpg'; (and similar lines I suppose) saying: Uncaught typeError:cannot set property 'src' of undefined" but I have no idea what that means and how to fix it.
That line is supposed to make sure that the 3rd thumbnail image is restored if I click on a the 2nd thumbnail.
Is there an easy way to fix that?
thanks
