Stupid Web Tricks: Create your own slide show with DHTML and CSS

By Lauren Guzak and Patrick Joseph
(1/26/99, updated 6/22/01)

Anybody can put their vacation pictures on their Web site, but only the coolest Web builders will have them set up as a slide show. And not just a simple one-picture-per-HTML-page slide show, either, but a truly dynamic slide show, where every image loads into the same HTML page. We'll show you how to build your very own slide show using Dynamic HTML (DHTML) and Cascading Style Sheets (CSS), so that you can bore, er, impress your friends, family, and coworkers even more! Remember, though: becauase the slide show uses DHTML, it works only with 4.0 or later browsers.

And, of course, this slide show has serious applications, too. We just can't think of any right now.

VIEW EXAMPLE [note: apparently, this does NOT work in Netscape 7.0]

Step One
Gather your Web-ready images and crop them all to the same size. Make sure you stay well within a 640-by-480-pixel size, and that your pixel dimensions remain constant for all of your pics--it's visually jarring for your audience to go from large to small to medium and back again.

Step Two
Within your header tags, you first need to indicate that you're using CSS with the <STYLE> tag. Within the <STYLE> tag, set the position in the page where you want the slide show to appear and decide whether or not you want it to start with a blank background or with the first slide showing. Cut and paste this code into your page using your chosen positioning coordinates:

<STYLE type="text/css">
<!-- .slides {position:absolute; left: 25%; top:25%; visibility:hidden} -->
</STYLE>

Step Three
Immediately following the CSS details, but still within the header tags, insert your JavaScript. Set the number of slides in the show (don't make it too many; every picture adds a substantial number of kilobytes to the page) after var numSlides =. Our example has five pics. Here's the code:

<SCRIPT language="JavaScript1.2">
var numSlides = 5;
var currentSlide = numSlides;

Step Four
If you want captions, use the following code, replacing our descriptions with your own:

var captionTxt = new Array(numSlides);

function setUpCaptions() {
captionTxt[1] = "Entrance to Pier 39."
captionTxt[2] = "Sea Lions lounging around the pier."
captionTxt[3] = "Boats docked on the Pier."
captionTxt[4] = "Underwater World whale mural."
captionTxt[5] = "Alcatraz, or, The Rock."
}

Step Five
Paste the code shown here into your page's HTML, just below the captions JavaScript. Since Navigator 4.0 and Internet Explorer 4.0 interpret CSS differently, our script uses object detection to detemine which model is present. If the Navigator model is present, it defines some custom objects to make the Internet Explorer code work anyway. This is also the end of the whole script, so be sure to close it out with a </SCRIPT> tag:

function setUp() {
if (!document.all) {
document.all = document;
for (i=1;i<=numSlides;i++)
document.all[("image"+i)].style=document.all[("image"+i)];
}
switchSlide(1);
}

function switchSlide(sDir) {
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("image"+currentSlide)].style.visibility="hidden";
// remove the next line if you don't want captions:
document.all["captions"].document.forCaptions.captionsText.value=captionTxt[newSlide];
currentSlide = newSlide;
}

//-->
</script>


Notice the comment near the end of the script; if you don't have captions, remove the line beneath it.

Step Six
Close out the header with the </HEAD> tag, and in the body of the page's HTML, paste the following code. Note that the code assigns distinct <DIV> tags for each image, which are referenced in the normal <IMG src> fashion:

<BODY onLoad="setUp()">
<B>CNET Builder.com slide show!</B>
<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>
<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>

Step Seven
Your audience gets to click through the slide show at their own pace, so you'll need to give them something to click. You could use plain old hyperlinks, but special GIFs for Next and Previous buttons are much slicker. The sample code uses a table to reference next.gif and previous.gif.

<DIV style="position:absolute; top:350px; left:100px">
<A href="javascript:switchSlide(-1)"><IMG src="previous.gif" border=0></A>
<A href="javascript:switchSlide(1)"><IMG src="next.gif" border=0></A>
</DIV>

If you don't want to use GIFs for the Previous and Next buttons, replace the <IMG> tags above with text.

Step Eight
Finally, load up the <TEXTAREA> where the captions will be shown. You can make the size of the <TEXTAREA> as large or small as you like by changing the rows= and cols= numbers. Here's the code:

<DIV id="captions" style="position:absolute; left: 320px; top:75px">
<B>Picture caption</B>
<FORM name=forCaptions>
<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>
</FORM>
</DIV>

For your convenience, here's the complete script. Click here.

Lauren Guzak is a project manager for Ask Jeeves, and Patrick Joseph is a freelance writer.