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.

Links

Related Posts

One thought 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 *