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. See the list to the right.

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
    bTrans: false, // transition filter for IE Win
    images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"]
}

The transition filter (bTrans) is set false for this demo since the images are not quite the same shape. The effect is less than attractive when the images do not have the same dimensions.

Rotate Linked

This example demonstrates the Rotate Images code with linked images.

In this example the destination URL is the same for each image that is swapped in. Each image could have a separate destination URL as well, as another example demonstrates. The documentation provides instructions for setting up the linked image in your document.

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
    bTrans: true, // transition filter for IE Win,
    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.

In the object literal of rotator properties used to set up the array of images, set up a parallel array of actions to take onclick of those images:

var rotator = {
    path: "images/",
    id: "r1",
    bTrans: true,
    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"]
}

Just as with the Rotate Linked Images example that has each image navigate to the same URL, you 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 from the list of images provided.

As this example demonstrates, each image can have a distinct URL. The images could also be unlinked or could all navigate to a single URL. Other properties such as titles and captions can also be added with random rotation.

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 ...
}

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 to licensed users.

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.

A demo and further instructions are provided to licensed users.

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"]
}

Further instructions and a download example are provided to licensed users.

More

open subwindow, call custom function

php extension