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.