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