TUTORIALS SUBMENU ---->

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING

There are many times when you will need a simple no-fuss image rotation script that randomly displays a single image from a pre-defined image collection.  Banner rotation scripts are usually used for the larger sites, but these can be cumbersome and totally un-necessary when all you want to do is switch between a few images and don't need them to be shown with advanced features such as sequential access, stat-logging, etc.   The following tutorial details a simple JavaScript method of achieving this goal, and should work in all client browsers that support JavaScripting (i.e. 99.5% of browsers in use today).

To get started, simply copy & paste the following code into your page where you want the random images to be displayed:

<SCRIPT LANGUAGE="JavaScript"> <!-- Begin var how_many_ads = 2; var now = new Date() var sec = now.getSeconds() var ad = sec % how_many_ads; ad +=1; if (ad==1) { url="URL GOES HERE"; alt="ALT TEXT"; banner="IMAGE URL HERE"; width="NUMBER"; height="NUMBER"; } if (ad==2) { url="URL GOES HERE"; alt="ALT TEXT"; banner="IMAGE URL HERE"; width="NUMBER"; height="NUMBER"; } document.write('<a href=\"' + url + '\" target=\"_blank\">'); document.write('<img src=\"' + banner + '\" width=') document.write(width + ' height=' + height + ' '); document.write('alt=\"' + alt + '\" border=0></a>'); // End --> </SCRIPT>

This code may look complex at first, but look at it a little closer and you'll realize that it is in fact stupendously easy to comprehend.  To add more banners into the rotation find the bit of code with the variable that says  how_many_ads = 2; and change the number 2 to the desired number of images in your rotation.

Now look for the code below - you will see it repeated twice, with with a different 'ad' value:

if (ad==1) { url="URL GOES HERE"; alt="ALT TEXT"; banner="IMAGE URL HERE"; width="NUMBER"; height="NUMBER";

Now all you need to do is change the information in this code chunk to reflect your new image data.  For example, if you want four images in the rotation, your code will now look as follows (areas in bold show the alterations):

<SCRIPT LANGUAGE="JavaScript"> <!-- Begin var how_many_ads = 4; var now = new Date() var sec = now.getSeconds() var ad = sec % how_many_ads; ad +=1; if (ad==1) { url="URL GOES HERE"; alt="ALT TEXT"; banner="IMAGE URL HERE"; width="NUMBER"; height="NUMBER"; } if (ad==2) { url="URL GOES HERE"; alt="ALT TEXT"; banner="IMAGE URL HERE"; width="NUMBER"; height="NUMBER"; } if (ad==3) { url="URL GOES HERE"; alt="ALT TEXT"; banner="IMAGE URL HERE"; width="NUMBER"; height="NUMBER"; } if (ad==4) { url="URL GOES HERE"; alt="ALT TEXT"; banner="IMAGE URL HERE"; width="NUMBER"; height="NUMBER"; } document.write('<a href=\"' + url + '\" target=\"_blank\">'); document.write('<img src=\"' + banner + '\" width=') document.write(width + ' height=' + height + ' '); document.write('alt=\"' + alt + '\" border=0></a>'); // End --> </SCRIPT>

Now all you have to do is enter in the values, upload the changes to a site and open it in your browser - its as simple as that!   Just remember that the URLs in the image settings *MUST* be qualified properly (i.e. http://www.yourdomain.com/images/yourimage.jpg), and state height/width in pixels.   If you have any problems just comment in this thread and I will try my best explain it a little more.   Enjoy!

- Tutorial written by allstar

Automatic Translations: