Rotate Images Examples

Just Rotate

This example demonstrates the JavaScript Image Rotator with unlinked images.

Since the image is not linked it will not respond to mouseovers or clicks. Other examples do provide these features and more.

The options for this example are set up as follows:

var rotator1 = {
    path: "images/",  // path to your images
    id: "r1",   // id assigned in image tag
    speed:  4500, // rate of rotation
    images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"]
}

Rotate Linked

This example demonstrates the Rotate Images code with linked images. The destination URL is the same for each image that is swapped in. Each image could have a separate destination URL, as another example demonstrates.

The options for this example are set up as follows, with the optional pause/resume feature included:

var rotator = {
    path: "images/",  // path to your images
    id: "r1",   // id assigned in image tag
    speed:  4500, // rate of rotation
    bMouse: true,   // pause/resume onmouseover/out
    images:     ["swans.gif","deco.gif","crystal.gif",
                "mex-sun.gif", "om.gif", "astro.gif"]
}

Rotate Linked with Distinct URL's

In this example each image swapped in has a corresponding URL assigned. The options for this example are set up as follows, with the URL for each image specified in actions:

var rotator = {
    path: "images/",
    id: "r1",
    bMouse: true,
    images:     ["swans.gif","deco.gif","crystal.gif",
                "mex-sun.gif","om.gif","astro.gif"],
    actions:    ["index.html",
                "documentation.php",
                "http://www.dyn-web.com/code/rotate_images/", 
                "http://www.dyn-web.com", 
                "demos.php", 
                "http://www.dyn-web.com/business/terms.php"]
}

Specify the initial URL in the link's href attribute:

<a href="index.html"><img id="r1" src="images/swans.gif" alt="" /></a>

Notice that the first action listed for rotator is the same as the href attribute of the link surrounding the image in the document. Also notice that the number of images and the number of actions are equal.

Random Rotation

This example demonstrates the images rotating at random. The image appearing first is also selected at random.

When you want the first image that displays in the document to be selected at random, rather than place that image in the document with an img tag, you include a script segment and a call to a dw_getRandomImage function where you wish the image to appear in the layout.

<script type="text/javascript">dw_getRandomImage(rotator1)</script>

Set the bRand property true in the properties list:

var rotator1 = {
    path: 'images/',
    id: 'r1',
    images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"], 
    bRand: true,
    // other properties ...
}

An example is included in the download file. More detailed instructions are provided with a license purchase.

Rotate Titles with Images

In this example the title attribute content is swapped along with the image. Pause with your mouse over the image; observe the changing title upon repeating.

For setup, include the first title in the image tag.

 <a href="index.html"><img id="rotate_img" src="images/smile.gif"
    title="That's a nice smile!" alt="" /></a>

A demo and further instructions are provided with a license purchase.

Rotating Captions with Images

In this example a caption is swapped along with the image. Your caption can be plain text or richly formatted HTML.

Content for your captions is added in the properties, much like the images and actions shown in the other demos.

An example is included in the download file. Further instructions are provided with a license purchase.

Multiple Instances

This example demonstrates support for multiple instances.

The process for setting up multiple instances essentially repeats that for setting up a single instance. Keep in mind that each image tag would need a unique ID:

<!-- images that rotate -->
<img id="r1" src="images/swans.gif" alt="" />
<img id="r2" src="images/turtle.gif" alt="" />

Set up a separate set of properties for each instance, the id property matching that in the associated img tag:

var rotator_1 = {
    path: "images/",
    id: "r1",
    images: ["swans.gif","deco.gif",
        "crystal.gif","mex-sun.gif"]
}

var rotator_2 = {
    path: "images/",
    id: "r2",
    images: ["turtle.gif", "cave-art.gif", 
        "sunset.gif", "mandala1.gif"]
}

An example is included in the download file. Further instructions are provided with a license purchase.