Inline Sample:
This is a inline sample, when you roll over the link it simply pushes the text to the right.
Just a note, this could become problamatic if your text wraps to the next line and you'll more than likely want to give one of the other options a go.
Overlay Sample:
This is the overlay sample, when you roll over the link it will display above the content to the right, like a tooltip.
This is the best used option and will give your user more real estate when it comes to clicking what they want.
It adapts to your longer links also.
To add this you'll need jQuery and jQuery.linkControl.js, then add the following to the head of your document:
The two areas in bold are the DOM elements you want to add the code to. If you want to add it to all links just use $('a') then add the function call '.linkControl({})'.
You then need to specify whether you're using inline or overlay controls inside the open/close brackets. If you where using inline it would look like this:
$('a').linkControl({inline:true});
After you have the initial plugin working there are a few different options to help in customizing this. They go inside the open/close brackets.
inline:true (sets links up to inline style)
overlay:true (sets links up to overlay style)
padding:NUMERIC VALUE (sets padding for overlay link)
bgColor:'#HEX COLOR' (sets background color for overlay link)
borderColor:'#HEX COLOR' (sets border color for overlay link)
So, if I wanted to use the overlay style with 10 pixel padding, a grey background and white border, it would look like this:
$('a').linkControl({overlay:true, padding:10, bgColor:'#777', borderColor:'#fff'});
Right now I've only got 1 other one, but be assured, the list will grow.
jQuery Page Peel: A jQuery plugin for the page peel ad effect used on quite a few sites now.