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?

Recommended Answers

All 5 Replies

Just after posting I spotted an error in the CSS: left: 110; should be left: 110px; I have now corrected this but the problem remains.

you have an image with an ID = "next" on your document collection and you are not declaring it as a variable, meaning you are referencing to an already defined existing image object and trying make it a string on the fly, you cannot nullify that image and reassign a string instead. Secondly, you are using an obsolete doctype for the document. Correcting this will suffice...:i.e: <!DOCTYPE HTML>

you have an image with an ID = "next" on your document collection and you are not declaring it as a variable, meaning you are referencing to an already defined existing image object and trying make it a string on the fly, you cannot nullify that image and reassign a string instead.

Thanks for your advice.
I don't think I reference that image in my Javascript, I certainly did not mean to, just pic0 pic1 pic2 and pic3. However, I renamed the next variable in the Javascript as next2 in order to remove that coincidence, and it still does not work.

Secondly, you are using an obsolete doctype for the document. Correcting this will suffice...:i.e: <!DOCTYPE HTML>

The page has now been converted to 4.01 strict, i.e.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

but this has not made any difference.
Any further suggestions, anybody? I believe that in earlier versions of Internet Explorer the onclick and other actions were only accepted in the <A> tag, but I believe the latest "standards compliant" versions do not require this?

Nope that's not really true -just came back from your http://stmarytheboltons.org.uk/hall/index.html -and the code is working perfectly, on all browser modes quirks/standard (ie7 ie8 ie9) you name it. Other visitors can confirm this too.
p.s.:
since you are using .html extension please hold the shift-key while pressing F5 to refresh the page.

Partial success - it's working now for Internet Explorer 9 in Windows 7, but still not for Internet Explorer 8 in Windows XP SP3. Thanks for your help, Troy. It's annoying that this is still not completely working but I cannot justify spending any more time on this.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.