Text Link Ad Rotation using jQuery

People who have been monetizing their sites need no introduction to Text Link Ads. In simple words, Text Link Ads are Hyperlinks sponsored by Advertisers. When a user clicks on these hyperlinks, they are sent to the sponsor’s website.

In this post, we will see how to rotate Text Link Ads on the same position. I will use the Cycle Plug-in for this purpose, since it accomplishes this task in just one line of code. Download the Cycle Plugin.

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Text Link Ad Rotation</title>
<
script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</
script>
<
script type="text/javascript"
src="Scripts/jquery.cycle.all.min.js">
</
script>

<
script type="text/javascript">
$(document).ready(function() {
$('#Links').cycle('fade');
});
</script>

<
style type="text/css">
body
{
font-size:13px;
font-family:"Lucida Grande", "Lucida Sans Unicode";
color:#444444;
}
</style>

</
head>
<
body>
<
div id="Links">
<
a href="http://www.dotnetcurry.com">.NET Articles</a>
<
a href="http://www.sqlservercurry.com">SQL Server Tips</a>
<
a href="http://saffronstroke.com">Expression Web Tips</a>
</
div>
</
body>
</
html>

You can use the Effects Browser page to preview all the effects that are available with the Cycle Plug-in.

Note: To rotate ASP.NET Hyperlinks, replace the HTML links with the following:

<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="http://jquery.com">jQuery</asp:HyperLink>

There’s no need to change any other code since this asp.net control gets rendered as <a href=””…

You can see a live demo of the example given in this post over here. The Link Rotates after every few seconds.



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

3 comments:

Anonymous said...

Very good. thanks a lot.its help me.in my way.

Svetoslav Marinov said...

Hi,

I used your example and added prev/next buttons.

Here is a link to my blog post:

http://slavi.biz/blog/how-to-create-a-text-based-carousel-using-jquery-and-cycle-plugin-2010-05-08.html

Thanks.

Anonymous said...

how can we add play & pause button to start, stop