Elegant Way of Rotating Small Banners
Banners are a standard way of advertising stuff online. Despite technology advances and interactive alternatives, the good old banner is still going strong. The mature of the Web has brought us ad size standards where the banner sizes are of certain sizes, which makes them easier to manage and display on Web pages.
Banners are most effective when located on a Web page hotspot where Web users are most likely to notice them. A Web page hotspot normally contains only few ad spots. Making the most from these banners is achievable in many ways. One way is to rotate the banners with a server side script or with a Java Script, which is the method we present here.
The example below uses the jQuery Cycle Plugin. We explore jQuery and its plugin a lot on this Web site. jQuery is a fascinating Java Script library and the Cycle Plugin provides a powerful and simple way of presenting images and text, together or separately.
Required downloads for this example:
HTML and Java Script code for this example.
<div id="myBanners" class="banners">
<a href="http://YOUR_URL_01">
<img border="0" src="PATH_TO_YOUR_BANNER_01" width="125" height="125">
</a>
<a href="http://YOUR_URL_02">
<img border="0" src="PATH_TO_YOUR_BANNER_02" width="125" height="125">
</a>
<a href="http://YOUR_URL_03">
<img border="0" src="PATH_TO_YOUR_BANNER_03" width="125" height="125">
</a>
<a href="http://YOUR_URL_04">
<img border="0" src="PATH_TO_YOUR_BANNER_04" width="125" height="125">
</a>
<a href="http://YOUR_URL_05">
<img border="0" src="PATH_TO_YOUR_BANNER_05" width="125" height="125">
</a>
</div>
$(document).ready(function(){
$('#myBanners').cycle({
fx: 'scrollDown',
speed: 300,
timeout: 3000
});
});