Stupid Web Tricks: Slide show Bob

Use this DTHML script to add commentary to your pictures.

Click here for our complete list of Stupid Web Tricks.

By Holly Cunningham

Hide the children and draw the curtains—the neighbors are back from vacation again. And you can tell from the raccoon-coffin-sized box they're lugging toward your house that another evening of stifling boredom awaits. How can you dissuade them from torturing you when even shoving your fist in front of the projector and repeatedly screaming at the silhouette "Look! It's Abraham Lincoln!" won't make them go away? It's DTHML to the rescue again. Take a couple of Paxils, head over to their house with this handy script, and show them how civilized people share pictures now that technology has made the 30-pound behemoth with its plastic carousel obsolete.

The picture array, with commentary

A picture may be worth a thousand words, but captioning with a few well-chosen ones of your own is worth a couple of laughs. Paste this script into the <head> of your Web page.

Slide show script

Click here.

Near the top of the script, you will find two variables, numSlides and captions. Next to each variable, put the number of slides that you will have in your slide show. Below these variables, you will find an array of captions. Match your captions to the images you intend to display in your slide show, adding extra captions as needed.

Some stylish divs

After the <body> tag, add the following CSS code, changing the left and top values to position the slide show on your page.

Click here.

Now to the pictures: place this code below the CSS code, changing "slide1.jpg", "slide2.jpg", and so on to the names of your own images and adding <div> tags for more pictures.

Click here.

In order for this to work flawlessly in older versions of Navigator, all of the images must be the same pixel dimension, or Navigator will stretch or compress the pictures—often to amusing effect—to match the dimensions of the first. You can always paste all of your images into a colored rectangle with an image editor, using the rectangle dimensions as a standard size. That will create a border around your pics, fluffing them out to avoid Netscape resizing.

Now add the <div> tags with your control buttons and the <form> area where your captions will be displayed below your images:

Click here.

You will need right and left arrow GIFs—referred to in the script as "arrowleft.gif" and "arrowright.gif"—for buttons. You can also adjust the left and top values to better position the buttons and the captions <form>.

Holly Cunningham, a frequent contributor to CNET, is a freelance Web designer who works primarily to keep her Chihuahua in furs.

Editor's Picks

Free Newsletters, In your Inbox