I've searched Google and although there are several hits in this general area, none matches my issue.
The problem is on this page of a church web site where they are hiring out the hall. It's supposed to cycle through four pictures and that works in Firefox and Chrome and SeaMonkey - you click an image of a left or right arrow and it takes you to the previous or next picture. In IE8 under Windows XP you see the first picture but nothing happens. In IE9 under Windows 7 you see the first picture and on clicking an arrow that picture disappears but nothing replaces it.
The web page validates as HTML 4.01 Transitional when run through the W3C Validator - no errors or warnings.
The chunk of HTML that includes the pictures is
<p>Here are some pictures:</p>
<p style="position: relative; margin: 1em auto; width: 700px;height:360px;">
<img src="prev.png" alt="Previous picture" id="prev" onclick="view(-1);return false;">
<img src="100_2086.JPG" id="pic0" alt="Hall interior">
<img src="100_2087.JPG" id="pic1" alt="View down that hall">
<img src="100_2088.JPG" id="pic2" alt="Angled view of hall showing windows">
<img src="100_2089.JPG" id="pic3" alt="The kitchen">
<img src="next.png" alt="Next picture" id="next" onclick="view(1);return false;">
</p>The pictures all absolutely positioned and overlay each other. Only the first is visible, the rest are hidden, here's the CSS:
<style type="text/css">
#pic0, #pic1, #pic2, #pic3 {
position: absolute;
top: 0;
left: 110;
width: 480px;
height: 360px;
}
#pic0 {
visibility:visible;
}
#pic1, #pic2, #pic3 {
visibility: hidden;
}
#next, #prev {
position: absolute;
top: 155px;
width: 100px;
height: 50px;
}
#prev {
left: 0;
}
#next {
right:0;
}
</style>And the Javascript that's supposed to swap the pictures is:
<script type="text/javascript">
pic = 0;
function view(i) {
now = 'pic' + pic;
document.getElementById(now).style.visibility = 'hidden';
pic = pic + i;
if (pic < 0) pic = 3;
if (pic > 3) pic = 0;
next = 'pic' + pic;
document.getElementById(next).style.visibility = 'visible';
}
</script>So all the code does (or should do) is to make the current picture hidden and then make the next, or previous, one visible by changing its style. Which it does, in all browsers except Internet Exporer. Any ideas or suggestions?
