Displaying a Balloon on mouseover on sponsored links

§€NTiN€L

Grype Solutions
Joined
Jun 3, 2006
Messages
359
§€NTiN€L submitted a new Article:

Displaying a Balloon on mouseover on sponsored links

(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:

balloon1.gif


Pointing the mouse on a link pops up the yellow balloon. As can be seen above.

First we wrap our link with a
HTML:
<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:
<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:
<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...

Read more about this article here...
 
Last edited by a moderator:

tyros8000

MyBB Fan!
Joined
Apr 19, 2006
Messages
279
simple but effective. nice tutorial. i may add this to my forums affiliates.
 

MMM

Rent This Space...
Joined
Apr 7, 2005
Messages
4,648
None of the examples work and the site is completely down :tisk:
 

§€NTiN€L

Grype Solutions
Joined
Jun 3, 2006
Messages
359
Please accept my appologies. Our site was down for some time. It's back up.
 

MMM

Rent This Space...
Joined
Apr 7, 2005
Messages
4,648
Does that mean you're going to get the examples to work? :confused:
 

Grimlogic

Aspirant
Joined
May 11, 2007
Messages
22
Nice.

This will tend to be lighter since it's just CSS, right? I may use this in the future.

Thanks for the share!
 

Libertate

Devotee
Joined
Aug 3, 2005
Messages
2,041
§€NTiN€L, are you associated with TheChiro of vbulletin.org?
 
Last edited by a moderator:
Top