Пример "ссылка в продолжении текста":
При наведении на ссылку она как бы толкает текст вправо.
Иногда это не очень хорошо выглядит, особенно тогда, когда отодвигаемый текст переходит на новую строку.
Пример наложения:
При наведении на ссылку она будет отображаться правее над контентом, как подсказка.
Это наиболее удачный вариант и позволяет пользователю выбор - в каком окне открыть ссылку: текущем или новом.
Нужно подключить библиотеку 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'});