Здравствуйте, дорогие друзья, читатели и гости блога. Всплывающая подсказка при наведении на ссылку курсора не только будет полезна вашим посетителям, но и добавит ещё небольшую деталь к оформлению сообщения. На многих сайтах вы сталкивались с таким вариантом подсказок.
Я, к своему удивлению, обнаружила, что у меня на эту тему нет ни одного поста. Хотя вариантов всплывающих подсказок достаточно много. А тот, который сегодня вам предлагаю, прошу посмотреть на тестовом блоге.
Скопируйте следующий код к себе в блокнот, чтобы сделать некоторые изменения под ваш дизайн.
Я, к своему удивлению, обнаружила, что у меня на эту тему нет ни одного поста. Хотя вариантов всплывающих подсказок достаточно много. А тот, который сегодня вам предлагаю, прошу посмотреть на тестовом блоге.
Скопируйте следующий код к себе в блокнот, чтобы сделать некоторые изменения под ваш дизайн.
//<![CDATA[
(function() {
var a = document.getElementsByTagName('a');
var t = document.createElement('span');
t.id = "tt";
t.style.position = "absolute";
t.style.zIndex = 999;
t.style.backgroundColor = "#E46969 ";
t.style.border = "1px solid #9F0707";
t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
t.style.boxShadow = "0 1px 3px rgba(0,0,0,0.4)";
t.style.padding = "5px 10px";
t.style.color = "#000";
t.style.maxWidth = "170px";
t.style.wordWrap = "break-word";
t.style.display = "none";
document.body.appendChild(t);
var tooltip = document.getElementById('tt');
function over(e) {
tooltip.style.display = "block";
tooltip.innerHTML = this.title;
tooltip.style.top = (e.pageY + 25) + 'px';
tooltip.style.left = e.pageX + 'px';
this.setAttribute('original', this.title);
this.title = "";
}
function out() {
tooltip.innerHTML = "";
tooltip.style.display = "none";
this.title = this.getAttribute('original');
this.removeAttribute('original');
}
for (var i = 0; i < a.length; i++) {
if (a[i].title) {
a[i].onmouseover = over;
a[i].onmouseout = out;
}
}
})();
//]]>
</script>
(function() {
var a = document.getElementsByTagName('a');
var t = document.createElement('span');
t.id = "tt";
t.style.position = "absolute";
t.style.zIndex = 999;
t.style.backgroundColor = "#E46969 ";
t.style.border = "1px solid #9F0707";
t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
t.style.boxShadow = "0 1px 3px rgba(0,0,0,0.4)";
t.style.padding = "5px 10px";
t.style.color = "#000";
t.style.maxWidth = "170px";
t.style.wordWrap = "break-word";
t.style.display = "none";
document.body.appendChild(t);
var tooltip = document.getElementById('tt');
function over(e) {
tooltip.style.display = "block";
tooltip.innerHTML = this.title;
tooltip.style.top = (e.pageY + 25) + 'px';
tooltip.style.left = e.pageX + 'px';
this.setAttribute('original', this.title);
this.title = "";
}
function out() {
tooltip.innerHTML = "";
tooltip.style.display = "none";
this.title = this.getAttribute('original');
this.removeAttribute('original');
}
for (var i = 0; i < a.length; i++) {
if (a[i].title) {
a[i].onmouseover = over;
a[i].onmouseout = out;
}
}
})();
//]]>
</script>
Я отметила другим цветом, то что вы сможете поменять. Здесь сам фон окна подсказки, толщина и цвет рамки, размер и цвет шрифта, тень, отступы.
После того, как внесли свои изменения, идём во вкладку шаблон и выбираем изменить HTML. Сделайте перед этим резервную копию шаблона. С помощью клавиш CTRL+F ( читаем здесь про это) находим закрывающийся тег </body> и над ним готовый код устанавливаем. Если пока таким образом не получается отыскать, просто начните просматривать шаблон с конца. Обычно </body> там недалеко.
Нажимаем просмотр и если нет замечаний - сохраняем.
Теперь при написании сообщения в том месте, где предполагается ссылка, переходим из режима создать в режим HTML и оформляем её в такой код -
<a href=" адрес страницы, куда ведёт ссылка" title=" отображаемый текст в окне всплывающей подсказки">вот ссылка</a>
И всё. Сложного нет ничего. Пробуйте, экспериментируйте и все обязательно получится.
В этом посте вариант красивого оформления ссылок.
Сегодня у меня всё и спасибо вам всем за внимание. До новых встреч.
здесь можно оформить подписку на новые шпаргалки
