Rotate Images Documentation

This page provides setup instructions for the Rotate Images JavaScript. You may find it helpful to view the source code of an example document from the download file as you read the instructions below.

Instructions

To set up the Rotate Images JavaScript, follow these steps. Details on each step are provided below.

1. Script Tags

Place script tags for the external JavaScript files in your document:

<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_rotator.js" type="text/javascript"></script>

Random Rotation requires an additional JavaScript file: dw_rotator_aux.js. The example documents in the download file will include all required files.

2. Image Tag

Place an image tag in the document where you wish your images to rotate. Include the id attribute in the tag and assign a unique id. Assign the first image to appear there to the src attibute. Here is an example:

<!-- Images rotate here. -->
<img id="r1" src="images/smile.gif" alt="" />

Other image tag attributes, including height and width, are optional. See information on using images of varying dimensions in the rotation.

If your image is linked, specify the URL in the link's href attribute:

<!-- Images rotate here. -->
<a href="index.html"><img id="rotate_img" src="images/swans.gif" alt="" /></a>

A linked image may be displayed with a border in some browsers unless you include the following in the style sheet:

a img { border:none; }

Note: Random Rotation requires a different setup if the first image is to be selected at random from your list of images. The random rotator demo explains further.

3. Rotator Images and Settings

Images and settings for the rotator are specified in an object literal[1] as demonstrated here:

var rotator1 = {
    path: 'images/', // path to your images
    id: 'r1', // id assigned in image tag
    speed: 3000, // rate of rotation (default: 4500)
    bMouse: true, // pause/resume onmouseover/out 
    bRand:  true, // random rotation
    images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"],
    // URLs or other actions onclick of images 
    actions: ["index.html", "http://www.yourdomain.com",
            "yourpage.html", "http://www.google.com"]
}

Not all rotator examples will include all the properties shown above. For example, if your rotating images are not linked, or if they will all navigate to the same URL onclick, the actions property would not be needed. The actions property is only needed when each image has a separate destination URL. However, you can include the actions property and specify a single URL in the array for random rotation, or you can surround the script tags with a link.

Notice that the first URL specified in the actions property matches the URL specified for the linked image demonstrated above. Notice also that the number of images matches the number of actions in the properties list.

4. Initialize

The Rotate Images JavaScript is initialized with a call onload to dw_Rotator.setup. Pass the name of the object holding your rotator properties to the setup function as shown here:

function initRotator() {
    // pass name of variable containing rotator properties
    dw_Rotator.setup(rotator1);
}

dw_Event.add( window, 'load', initRotator);

About Image Size Variation

If you place the first image in your page source and include height and width attributes in the image tag, subsequent images not that size will be resized to fit those height/width specifications. If you do not include height and width attributes, current browsers will display the images at their actual sizes and reflow page content as needed. You can set width and height on a containing element large enough to accomodate the largest image to be rotated in to avoid document reflow.

Download Examples

A download file includes the Rotate Images JavaScript and several example documents.

Back to top


  1. We have prepared a brief tutorial on Object Literals for those unfamiliar with the syntax.^