On the Stre@m

Source code: microlink.zip

A microlink is a link that opens up content below it. It is a way to improve the ordinary link using Ajax.

Prerequisites

Basic Ajax knowledge.
prototype.js http://prototype.conio.net/
script.aculo.us http://script.aculo.us/

Draw

First let’s lay down the base for this Ajax pattern. We will use prototype.js to create an Ajax call to the server. We could do this ourselves but this is beyond the scope of this article.

First of all, we need a link and a place to add our content that will be retrieved from server when the user clicks on the link. For that we will create inside the file index.jsp the following two lines:

<a class="button" href="content.jsp">the microlink</a>
<div id="microlink"></div>

The style is defined in an CSS file:

.button {
   color: #003399;
 }

.button:hover {
   text-decoration: none;
     color: #66ffcc;
     background-color: #003399;
 }

.button:active {
   color: #ffffff;
   background-color: #0099cc;
 }

Now the page looks like this: