I have created a small slideshow for a client, which may be seen at http://webadit.co.uk/cakelady/?page=wedding1.
Each thumnail image is contained in a LI. The complete ‘text’ content of each LI is quite long, much of the content is the same. So to save myself some typing I’m trying to generate the links when the page loads. It works fine in FF8 and in IE9, but fails in IE7 (IE8 not tested yet).
The full text of the LI is:
<li><a onclick="return showPic(this)" href="img/cake1.jpg" title="The finished cake"><img src='img/cake1.jpg' alt='' /></a></li>
If hard coded like that it works ‘everywhere’ (FF8, IE7 & IE9 tested so far). You can see that at http://webadit.co.uk/cakelady/?page=wedding.
To save myself typing I’ve tried a simple link to the thumbnail like this:
<li><img src='tn/cake1.jpg' alt='The finished cake' /></li>
and then generated the necessary additional code with JS on loading:
// Creates and appends links for Slide Show
function setSlideshowLinks(path) {
if (!document.getElementById) return false;
var slides = document.getElementById('slideshow');
var items = slides.getElementsByTagName('li');
for (var i=0; i<items.length; i++) {
var img = items[i].firstChild;
var src = img.getAttribute('src');
var alt = img.getAttribute('alt');
var slash = src.lastIndexOf('/')
var imgname = src.substr(slash+1); // larger image has same NAME, different path
var newsrc = path + imgname; // new source for the larger image
var anchor = document.createElement('a');
anchor.setAttribute('onclick', 'return showPic(this)');
anchor.setAttribute('title', alt);
anchor.setAttribute('href', newsrc);
anchor.appendChild(img);
items[i].appendChild(anchor);
}
}
This function is finding all the LI tags in the Slide Show, looping through them in turn and creating the additional information, including the ‘onclick’ event handler. The Title for the displayed image is derived from the ‘alt’ on the thumbnail.
In FF8 the generated code looks like this:
<li><a href="img/cake1.jpg" title="The finished cake" onclick="return showPic(this)"><img src="tn/cake1.jpg" alt="The finished cake"></a></li>
And in IE7 it looks like this (from the Debug Bar):
<li><A title="The finished cake" onclick="return showPic(this)" href="img/cake1.jpg"><IMG alt="The finished cake" src="tn/cake1.jpg"></A></li>
Apart from the order of the attributes and the capitalisation of the elements, this appears to me to be identical. But, when I click on the thumbnail, instead of the ‘onclick’ behaviour I get the enlarged image opening by itself in the window. The ‘onclick’ is being ignored. There are one or two ‘alerts’ in the ‘showPic’ script which serve to show when it is called from the ‘onclick’ event handler (alerts not seen in IE7, of course).
I wouldn’t have thought that the order of attributes would make any difference, so what can be causing this to fail in IE7, bearing in mind that it works OK when hard coded ?
Note 1: The original IMG element in the LI isn’t explicitly removed, as it doesn’t seem necessary in FF, and doesn’t appear in the generated code. In fact I have tried explicitly removing it at the end of the JS function, only to get a not found error. Perhaps appending it to the anchor serves the same purpose.
Note 2: Images are my own, and not indicative of the quality of my client’s work.