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.

Bookmark this link on del.icio.us (saved by 0 users)

Did you like this post?



	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

comments

2 Responses to "Text Link Ad Rotation using jQuery"

Anonymous said...

April 2, 2010 3:47 AM

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

May 8, 2010 11:26 AM

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.

June 25, 2009