| Simple Image Rotation (JavaScript) |
|
|
|
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
| 
There are no comments for this tutorial yet. You can place a comment by clicking here.
|

|
|
 |
Creating a seamless pattern; Not working Author: bpgd486 Posted: May 16th, 1:46pm Activity: 5 replies, 32 views
|  | Live Trace resolution Author: jttuck Posted: May 14th, 6:02pm Activity: 1 replies, 77 views
|  | Hello all, just found this site Author: skatz Posted: May 12th, 7:29pm Activity: 4 replies, 105 views
|  | FontStruct Author: Jacorre Posted: May 12th, 3:34pm Activity: 0 replies, 130 views
|  | Hey everyone Author: whelpton Posted: May 11th, 6:20pm Activity: 2 replies, 87 views
|  | Member Tutorial: Taking it further. Author: Trueskool Posted: May 11th, 1:30pm Activity: 1 replies, 145 views
|  | Orb - flash version Author: unleash Posted: May 11th, 11:38am Activity: 1 replies, 153 views
|  | Hi, first question Author: Findrikku Posted: May 11th, 8:43am Activity: 1 replies, 30 views
|  |
|
 |
 |
 |
 |
 |
| --- Site Resources --- |
| Total Tutorials: | 210 |
| Total Downloads: | 402 |
| Linkbase Links: | 255 |
 |
|
 |
 |
|