HTML Slide Shows

I wanted to create a scrolling picture show as a banner on all the pages in a micro site. Many sites use this for their front page decoration. I didn’t want to use animated gif because of the age of the technology.It’s obviously becoming easier. Basic Tips below, shows how to use the HTML META tag with http-equiv=”refresh”attribute set.

How to do it

The example asks the user to start the slide show, I didn’t want this. I create a bunch of slides as .htm[l] pages. Each slide page contains only the picture, and the meta tag, although a title and other meta data is probably a good idea.

<HTML>
<HEAD>
<TITLE>some title</TITLE>
<!------  This page is an image container and URL ------->
<META HTTP-EQUIV="refresh" CONTENT="8;url=ss2.html"> 
</HEAD>
<BODY>
<IMG SRC="picx/dlr-postbox.png" ALT="DLR" WIDTH="1024" HEIGHT="102" BORDER="0"> 
</BODY>
</HTML>

Each page points at the next page and has a time period defined in seconds. I, then implemented the slide show host page within an IFRAME.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<CENTER>
<IFRAME SRC="ss1.html" SCROLLING="NO" WIDTH="1024" HEIGHT="102" MARGINWIDTH="0" MARGINHEIGHT="0"> 
</IFRAME> 
</CENTER>
</BODY>
</HTML>

That’s it! The default margins don’t seem to be 0, so they need to be set. The frame is used to ensure that the image is displayed on the host page load.

2 thoughts on “HTML Slide Shows

  1. This article was spammed today, so I checked out the page and made some corrections. It’s 6 years old and the technique has been commoditised, certainly inside wordpress. The widget is often described as a carousel these days. I need to consider retiring some of this content as it’s too old to be useful, but not today.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.