HTML Slide Shows

I wanted to create a scrolling picture show as many sites use for their front page decoration. I didn’t want to use animated gif because ofthe 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

Check it out

Related Posts

Leave a Reply

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