Random Image Rotation

This example of the JavaScript Image Rotator demonstrates random rotation. You have the choice of allowing the code to choose the first image at random from the list you provide or you can place an image in the page if you would always like it to appear first.

Instructions

The documentation contains the simple instructions for implementing the code, such as the script tags to be included, the image tag setup and initialization of the code. The download file contains simple examples making it easy for you to locate the necessary components for code setup.

An additional external JavaScript file is required for the random rotation. Include a script tag for it in the head of the document with the others:

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

If one wants the first image selected at random the instructions differ for placement of the image in the document. Rather than place an image tag in the document you place a script tag where you would like the images to rotate:

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

If you want to place the first image in the page and then have subsequent images selected at random, follow the instructions for the image tag.

For random rotation set the property bRand true in the object literal containing the rotator properties: 

var rotator_random = {
    path: '/images/common/',
    id:   'rotate_img',
    bTrans: true,
    bMouse: true,
    bRand:  true,
    images:     ['turtle.gif', 'cave-art.gif', 'sunset.gif', 'mandala1.gif', 
                'cranes.gif', 'design1.gif', 'mandala2.gif', 'swans.gif',
                'deco.gif', 'crystal.gif', 'mex-sun.gif', 'om.gif'],
    actions:    [".", 
                "/", 
                "demos.php", 
                "documentation.php", 
                "rotate_php.php", 
                "/sitemap.php", 
                "/code/", 
                "/tutorials/", 
                "random_img_php.php", 
                "/business/terms.php",
                "/business/prices.php",
                "/business/contact.php" ]
}

Linking Randomly Selected Images

When you want the randomly selected image to be linked, setup of the rotator properties would vary depending upon whether you wanted each image to have its own URL, or all to navigate to the same destination onclick. The above rotator variable specifies actions corresponding with images, so each image has its own destination URL. If you want all images to navigate to the same URL onclick just specify one action: 

var rotator_random = {
    path: '/images/common/',
    id:   'rotate_img',
    bTrans: true,
    bMouse: true,
    bRand:  true,
    images:     ['turtle.gif', 'cave-art.gif', 'sunset.gif', 'mandala1.gif', 
                'cranes.gif', 'design1.gif', 'mandala2.gif', 'swans.gif',
                'deco.gif', 'crystal.gif', 'mex-sun.gif', 'om.gif'],
    actions:    ['http://www.dyn-web.com/code/rotate_images/']
}

Note: A blue border will appear around linked images unless you indicate otherwise, either in the border attribute of the image tag (border="0") or in the style sheet. If you are using a strict doctype and want your document to validate place the following in the style sheet:

a img { border:none; }

More Information

The documentation contains general information for implementing the code, such as the script tags to be included and initialization of the code. The download file contains simple examples making it easy for you to locate the necessary components for code setup.

Other examples demonstrate Sequential Rotation and PHP as a source of the rotating images.

See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.

Back to top