How to Make a Web Page Picture Change With Time

By Brian Jung

If your Web page is dull or too crowded with images, you might consider storing your images in a slide show. Using dynamic images that change over time can add interest and increase how much you are able to show with limited space. While there are innumerable approaches to creating dynamic images within a Web page, perhaps the most straightforward is by using the simple collection of coding methods collectively known as HTML5.

The Dynamic Web

Hypertext Markup Language, or HTML, is the original language of the World Wide Web. HTML consists of markup that describes how a browser will display the text of a page. Early versions of HTML did not allow for much dynamism or interactivity within the browser, but that quickly changed as the Web evolved. Originally, developers displayed dynamic content through plug-in software like Java Applets, Flash or Silverlight, but today most browsers can natively handle HTML5, which is designed with dynamic content in mind. HTML5 is simply a combination of specialized tags, a comprehensive style and layout language called Cascading Style Scripts, and a scripting language called JavaScript that allows code to run in browsers.

The JQuery Library

To display changing images on a Web page, you don't need to write a complete animation script from scratch. Several libraries exist which make animation simple to do. The most commonly used JavaScript library is called JQuery. JQuery simplifies JavaScript syntax and includes many ready-made functions, including several for animating images. To use the JQuery library, you can download the library and host it yourself or you can point to a library that Google hosts for public use. Just include the following in your HTML header section:

A Slide Show Script

You can set up a simple image swap using CSS and a short script. First, in your HTML page, display your images with code that looks like this:

In the header, define the style class "current":After the closing body tag (
) in your HTML page, include another script section that looks like this:After your page loads, the script will display each of your images in turn. The delay is set by the number of miliseconds in the setInterval function near the end of the script. Here, 5000 is the equivalent of five seconds.

Advanced Animations

Once you understand the basics of HTML5, you can explore more advance animations to give your slide show more flash or polish. You can write script that slides images across the Web page or fades one image into another. You can allow your users to stop the slide show, or determine its speed. Because JQuery can refer to anything on the page, you can even include text in your animations.

References & Resources