Управление ссылками - дает выбор пользователям

Демо

Пример "ссылка в продолжении текста":
При наведении на ссылку она как бы толкает текст вправо.

Иногда это не очень хорошо выглядит, особенно тогда, когда отодвигаемый текст переходит на новую строку.

Пример наложения:
При наведении на ссылку она будет отображаться правее над контентом, как подсказка.

Это наиболее удачный вариант и позволяет пользователю выбор - в каком окне открыть ссылку: текущем или новом.

Добавление на сайт

Нужно подключить библиотеку jQuery и файл jQuery.linkControl.js встроив в шапку следующий код: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jQuery.linkControl.js"></script>

<script type="text/javascript">

$().ready(function(){
$('a.inline').linkControl({inline:true});
$('a.overlay').linkControl({overlay:true, padding:5, bgColor:'#fff', borderColor:'#333'});
});

</script>

Два элемента выделенных жирным - элементы DOM, которые хотите добавить. Если хотите использовать эффект для всех ссылок, просто добавьте $('a') и вызовете функцию '.linkControl({})'.

Затем необходимо указать, какой именно эффект будет использоваться inline или overlay внутри скобок. Например для inline это будет выглядеть так:
$('a').linkControl({inline:true});

Опции

После основных настроек есть еще и дополнительные, которые помещаются внутрь скобок в коде.

inline:true (ссылки двигают текст вправо)

overlay:true (ссылка с эффектом наложения)

padding:NUMERIC VALUE (установка paddding для overlay ссылок)

bgColor:'#HEX COLOR' (установка background color для overlay ссылок)

borderColor:'#HEX COLOR' (установка border color для overlay ссылок)

Итак, если я захочу использовать стиль overlay с 10 pixel padding, серым background и белым border, то в коде необходимо писать так:
$('a').linkControl({overlay:true, padding:10, bgColor:'#777', borderColor:'#fff'});