(Note: Please DO NOT publish this article unless you keep a link back to our site from here.)
Some sponsors/link-exchangers want not just their link to show up in your page but some little descriptive text to go along with it. But what do you do if you are short of space? Decline a link exchange or a sponsor? NO! There's a better solution.
I faced this problem in our site that led me to come up with the idea of displaying an information balloon containing additional information about your sponsor when hovering on their links. This also has the added advantage of search engines traversing through that text. To see an example, mouseover on the links in the "Codeketchup Recommends" section in the homepage of our site, www.codeketchup.com!
The details of how to make that is given below:
Author: Farhad Khan
Source: www.codeketchup.com
This is a very easy way to display an information balloon just with CSS, NO javascript required. The following figure shows what we are going to do:
Pointing the mouse on a link pops up the yellow balloon. As can be seen above.
First we wrap our link with a HTML Code:
<span></span> or <div></div>
actually any HTML tag at all. Then inside the anchor <a ... > tag put the link and insert the balloon text in a <span> inside the <a ...> </a> tags as shown below:
HTML Code:
Quote:
<span>
<a href="http://www.codeketchup.com">CodeKetchup
<span>" Need help in extreme programming? Join Codeketchup!! Coding is Poetry .. may be you lack the mind "</span>
</a>
</span> |
At this point our page looks like this sample1. You can view the source of the page to get a complete picture.
Now we need to add the following style to the file:
HTML Code:
Quote:
<style>
.balloon a:hover {background-color: #FFFF99;;color:#0000FF;}
.balloon a:link span{display: none;}
.balloon a:visited span{display: none;}
.balloon a:hover span {
position: absolute;
margin:15px 0px 0px 20px;
background-color: beige;
max-width:400px;
padding: 2px 10px 2px 10px;
border: 1px solid #C0C0C0;
font: normal 10px/12px verdana;
text-decoration:none;
color: #000;
text-align:left;
display: block;
}
</style> |
After adding the style the file should look like this sample2. Again view the source of the file to find out what I have added.
Now the style has to be applied to our span that we wrapped around the <a ..> </a> tag. To do this we simply add the following to the wrapping <span> tag:
HTML Code:
class = "balloon"
so the span looks like this
HTML Code:
Quote:
<span class="balloon">
And the complete balloon code looks like the following:
HTML Code:
<!-- Balloon style starts -->
<style>
.balloon a:hover {background-color: #FFFF99;;color:#0000FF;}
.balloon a:link span{display: none;}
.balloon a:visited span{display: none;}
.balloon a:hover span {
position: absolute;
margin:15px 0px 0px 20px;
background-color: beige;
max-width:400px;
padding: 2px 10px 2px 10px;
border: 1px solid #C0C0C0;
font: normal 10px/12px verdana;
text-decoration:none;
color: #000;
text-align:left;
display: block;
}
</style>
<!-- Balloon style ends -->
<!-- Balloon code starts -->
<span class="balloon">
<a href="http://www.codeketchup.com">CodeKetchup
<span>" Taking programming to the Extreme? Need help? Join Codeketchup!! Coding is Poetry .. may be you lack the mind "</span>
</a>
</span>
<!-- Balloon code ends --> |
The resulting page will now look like this final sample3. And we are done!!
Further Explanation of the code:
The key idea here is that part of the style where it says
HTML Code:
display:none
and
HTML Code:
display:block
The balloon box always exists in the page. We catch the mouse over effects on the hyperlink from the style and set the "display" to "block" so the balloon is visible on mouse over, and invisible, i.e. "display" set to "none" on mouse out from the hyperlink. It's that simple 
.
