Jump to content
Sign in to follow this  

Rotating Banner (cycling Banner)

Recommended Posts

Hey, I don't see to many websites with rotating banners.

I'm not sure if people dislike them or just don't know how to do it.

It's not to hard to do it, heres something I found in 5 mins.


One method of creating an animated image is to create it as an animated gif file. This is all very well for simple images but what happens if you want to include photos or other complex images in your animation sequence?


The answer is to use a Javascript function to replace the image at regular intervals, that way you can use whatever images that you like in the sequence as long as all of the images are the same size. Since this effect is often used to replace ad banners, it is usually referred to as a rotating banner script but as you will see, the effect can be used for whatever images you like as long as they are all the same size.


Once you are sure that the banners are rotating correctly we can modify the img1.js script to associate the appropriate links with each image.



(function() {var imgs = new Array(); var imglinks = new Array();var imgcnt = 0; var thisimg = 0;imglinks[imgcnt] = 'http:\/\/www.google.com\/';imgs[imgcnt++] = 'graphics\/pic1a.gif';imglinks[imgcnt] = 'http:\/\/www.yahoo.com\/';imgs[imgcnt++] = 'graphics\/pic2a.gif';imglinks[imgcnt] = 'http:\/\/search.msn.com\/';imgs[imgcnt++] = 'graphics\/pic3a.gif';function rotate() {if (document.images) {thisimg++;if (thisimg >= imgcnt) thisimg = 0;document.getElementById('rollimg').src = imgs[thisimg];document.getElementById('rollimg').onclick =function() {location.href=''+imglinks[thisimg];};}}document.getElementById('rollimg').onclick = function() {location.href=''+imglinks[0];};setInterval("rotate();",5000);})();



All that remains to be done now is to add the code to convert the cycling banner so that it will act as a link to the appropriate pages


Here is the code for my sample image



<p align="center"><img src="graphics/pic1a.gif" width="150" height="150" border="0" alt="Cycling banner images" id="rollimg"style="cursor:pointer" /></p>



Of course a better solution would be to add #rollimg {cursor:pointer;} into your external stylesheet so as to not need to update the HTML at all.



I did not make this tutorial, I just found it.

It makes alot more sence if you read it on the website




Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this