Something I forgot to mention last time: XHTML 1.0 deprecates the name attribute for both the img and form elements: you may want to remove the mypic and joe identifiers and replace their object references with document.images[0] and document.forms[0], respectively. I'll tell you where I got the demo's button images later, but for now, I would like to go through some of the comments that follow the tutorial. Q & A (1) We begin with wolfie, who asks, Here is something I have not been able to find: How do I place a slide show (say 3 images) into a column in a table? You can't put a slide show in the HTML col element, which is an empty, 'contentless' element. But you could definitely load all of your slide show HTML into a td element, and then stretch that cell into a column by setting its rowspan attribute to an appropriate value. Content model-wise, the td element can contain just about anything (more specifically, the td element has a %flow; content model, meaning that it can contain block-level and/or inline children). (2) CassieLain's hand is raised: Is there any way that you can make the images a link to another page? No problemo - just follow these three simple steps: (a) As we did for the slide show image captions in the previous post, create an array of URLs that your images will link to: var myLink = new Array( ); myLink[1] = "http://www.someWebsite1.com"; myLink[2] = "http://www.someWebsite2.com"; myLink[3] = "http://www.someWebsite3.com"; myLink[4] = "http://www.someWebsite4.com"; (b) Place the slide show img placeholder in an anchor element whose href attribute is set to the URL for the first image: <a href="http://www.someWebsite1.com" target="_blank"><img width="" height="" src="image1.gif" alt="[Slide show]" /></a> <!-- The target="_blank" attribute will cause your links to open in new windows; take it out if you don't want it. --> (c) Add the following command to the slideshow( ) function: document.links[0].href = myLink[num]; Try it out below: (3) We lastly call on e&b: One question though, I would like to have it auto play and auto rotate in an infinite loop. Without the back and next buttons. Have tried a few things but no luck. Can you help?

An excellent question, e&b. But you don't want a slide show - you want an animation:

You're in luck: in JavaScript 1.1, Netscape presented a code template for a JavaScript animation on which the preceding demo is based, and which was very helpful in my putting together this and the previous posts, giving credit where credit is due. The key to Netscape's animation code is the img element's onload event handler: <img src="image1.gif" alt="[Animation]" onload="window.setTimeout('animate( );', delay);" /> (FYI: onload is a W3C-valid (X)HTML attribute only for the body and frameset elements, but if both Microsoft and (of course) Netscape say that onload can be used with the img element, then we should be good to go, eh?) In brief: (1) The onload attribute calls the animate( ) function after delay milliseconds. delay can be increased or decreased via the slower( ) or faster( ) function, which is called by clicking the Slower or Faster button, respectively. (2) The animate( ) function assigns a new image to the img placeholder and increments imageNum (the image index) à la our slideshow( ) function. When the new image loads, the onload attribute refires; animate( ) is called after delay milliseconds; the next image loads and imageNum is incremented; the onload attribute refires; and so on: a form of indirect recursion, if you will. Practical notes • Netscape's initial delay value, 100, results in an absurdly fast animation, at least for what we're doing here; delay = 1000 gives a much saner display. Moreover, Netscape's slower( )/faster( ) increment/decrement, 10, is way too small for my tastes, so I've beefed it up to 500: function slower( ) { delay += 500; if (delay > 3000) delay = 3000; } function faster( ) { delay -= 500; if (delay < 0) delay = 0; } • The animation does not run smoothly (and with MSIE and Safari, it doesn't run at all) unless imageNum is incremented before the image src-writing statement in the animate( ) function: function animate( ) { imageNum++; document.images[0].src = theImages[imageNum].src; document.forms[0].input0.value = myText[imageNum]; if (imageNum == 6) imageNum = 0; } Go back and look at Joe's slideshowUp( )/slideshowBack( ) functions - note that num is incremented/decremented before a new image is assigned to mypic's src. Where'dja get those buttons? Once upon a time, HTML Goodies hosted a "Free Images" page at http://www.htmlgoodies.com/freeimages/ (not a functional link) that offered for free download a collection of >400 clip art images. If I recall correctly, I learned about the "Free Images" page from HTML Goodies' "Basic HTML: Images" tutorial, which linked to it. Courtesy of the Internet Archive's "Wayback Machine", the "Free Images" page can still be seen here (among other archive locations). Most of its images are no longer available; however, following the WebSpice Images link leads to a "WebSpice Images" page on which the websp5.zip and websp6.zip archive links are still live, believe it or not - my button images have been taken from these archives. The button images' original file names are fretrial.gif, iaccept.gif, java2.GIF, joinnow.gif, notacept.gif, and notagree.gif, which can be changed/ordinalized for preloading the images automatedly, as discussed in the previous entry. If you're looking for free clip art images for your own slide show/animation, a "clip art" free Google search will lead you to plenty of relevant Web sites.