JavaScript City

Random Banner/Linked Image Display

This script will allow you to display a random banner/image when the page opens. Each banner can be linked to a url of your choice, so this can be used for a random banner ad rotation of sorts (it just won't track results).

Script Code

Grab a copy of the file below and place it in the same directory as the Web page on which you will use the script (if you wish to place the script file in a different directory you will need to make the necessary adjustments to the src attribute of the script tag that calls it).

simage2.js

The code below should be placed between the <body> and </body> tags where you want the banner/image to appear.

Example

A working sample of the script is shown below. Refresh the page to refresh the random image.

Options

The centering/borders etc. of the image can be set by adding and editing the my_banners id and/or the banner_imgs class in your CSS style sheet.

The image code in the HTML file is for a default banner/image to display in case JavaScript is turned off in the user's browser.

Additional images can be added to the random image set by editing the JavaScript code. Example code to add a sixth image:

/* Set image URLs */
my_imgs[0] = "../../images/shoes1.gif";
my_imgs[1] = "../../images/story1.gif";
my_imgs[2] = "../../images/shoes2.gif";
my_imgs[3] = "../../images/story2.gif";
my_imgs[4] = "../../images/scare.jpg";
my_imgs[5] = "../../images/sixth_image.jpg";

/* Set image link URLs */
my_imgs_link[0] = "http://www.javscriptcity.com";
my_imgs_link[1] = "http://www.pageresource.com";
my_imgs_link[2] = "http://www.pageresource.com/jscript/";
my_imgs_link[3] = "http://www.pageresource.com/html/";
my_imgs_link[4] = "http://www.javascriptcity.com/scripts/";
my_imgs_link[5] = "http://www.sixth_image_link_url.com";

/* Set image alternate text */
my_imgs_alt[0] = "JavaScript City";
my_imgs_alt[1] = "Page Resource";
my_imgs_alt[2] = "PR JavaScript";
my_imgs_alt[3] = "PR HTML";
my_imgs_alt[4] = "JSC Scripts";
my_imgs_alt[5] = "Sixth Image Alt Text";

Note that each image URL, link URL, and alt text will need to be added. The image URLs will need to be adjusted to fit your site. Also, the number in brackets ([5] in this case) needs to be increased by one for each image/link URL/alt text added.

Accessibility

The accessibility of this script will depend on the purpose for which it is used. This script should do nothing for browsers that do not support it. Depending on the purposes of the images used, a note informing the user of the information in the images other than the default image may suffice.