How to Get Rotating Images on My Web Page and Place Them Anywhere on the Page

by Darrin Koltow

Images that change automatically are inherently interesting to watch, which makes them ideal for keeping viewers on your website. Image cycling requires just a few lines of JavaScript. One approach relies on the setInterval statement, which runs any function you choose at periodic intervals. To easily position your images in the desired location on your Web page, specify the location's coordinates with the Top and Left properties of CSS.

1

Open Notepad, and then paste the following HTML statements into the document. These statements define a basic, blank Web page, into which you can insert statements for displaying cyclical images:

<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

2

Paste the following statements after the <BODY> HTML tag. This tag defines a placeholder for an image file called "b1.jpg." Even though this statement is hard-coded, JavaScript and CSS statements can change the placeholder's position and content:

<img id="someImage" src="b1.jpg">

3

Paste the following JavaScript statements just above the <img> tag. The statements prior to the changeImage function create image variables for that function, and then use setInterval to call that function at periodic intervals. The changeImage function uses the document.getElementById statement to insert images from the myImages array into the <img> tag:

<script type="text/javascript" language="javascript"> var idxImage = 0; var myImages = new Array("b1.jpg", "b2.jpg", "b3.jpg", "b4.jpg"); var i = setInterval(changeImage, 2500);

function changeImage() { idxImage++; if (idxImage == myImages.length) idxImage=0; document.getElementById('someImage').src=myImages[idxImage];
} </script>

4

Paste the following CSS statements immediately under the <HEAD> tag. These statements indicate the location of the page's <img> tag, in units of pixels. This location can be anywhere you specify. Type over the 230 and 200 values shown here with different values -- roughly from zero to 800 for the Top property, and zero to 1000 for the Left property. The display resolution of the PC or other device that shows your Web page sets the actual range, and therefore will vary. However, all devices will display the images in the upper left corner if you type "0" for both the Top and Left properties:

<style>

someImage

{ position:fixed; top:230px; left:200px; } </style>

5

Save the file with the ".htm" file extension, and then copy four images numbered consecutively from "b1.jpg" through "b4.jpg" into the same folder.

6

Open the Web page in your Web browser to view the continuously changing images.

Tip

  • check Always keep in mind to look for pictures that are FREE to use, or are under what is called the Creative Commons license. Otherwise, you might be violating someone's "intellectual property rights." Although it is commonly done - people steal other people's images all the time - it is actually a crime, not to mention a crummy thing to do. There is more than enough material out there given away for free.

Warning

  • close Information in this article applies to HTML 5. It may vary slightly or significantly with other versions.

About the Author

Darrin Koltow wrote about computer software until graphics programs reawakened his lifelong passion of becoming a master designer and draftsman. He has now committed to acquiring the training for a position designing characters, creatures and environments for video games, movies and other entertainment media.