Как при наведение на текст вывести дополнительное окно с подсказкой. Уроки HTML.

Добрый день! Друзья, не давно я наткнулся на один буржуйский сайт. Естественно этот сайт посвящен тематикам, которые подходят для наших блогов. Там авторы выкладывают много различных скриптов и всякого рода примочек для построения сайта. А наткнулся на такой сайт, когда в старом добром Google искал плагин для вывода дополнительной информации над текстом в виде подсказок. Плагин я нашёл, но страницу с ним в тот же миг закрыл, когда увидел, что ниже в поисковой строке, есть более альтернативный вариант — это скрипт.

Содержание статьи:
1. Как установить скрипт по выводу сплывающей подсказки при наведении на текст.
2. Как пользоваться скриптом.
3. Как установить и использовать плагин Tooltip.

Скачал скрипт, установил, проверил. Работает он как часы. Очень аккуратный и красивый. Скинул себе на в оБлако на mail. Немного перевел инструкцию по установке.

Как установить скприпт на блог?

Шаг 1.
В архиве будет содержаться файл alttxt.js. Копируете и кидаете этот файл через FTP-клиент в папку ваш_сайт.ru/wp-admin/js/alttxt.js.

ШАГ 2.
А в шапке сайта после тегауказываете путь к этому сайту, прописав следующее:

1

<script src="/wp-admin/js/alttxt.js" language="javascript"></script>

ШАГ 3.
Дальше прописывает стили, для этого открывает файл в папке с шаблоном для вашего сайта style.css и в конце документа вставляем следующий код:

1
2
3
4
5
6
7
8
9
10

.navtext {
text-align:left; 
width:235px; 
font:bold 9pt sans-serif; 
border-width:2px; 
border-style:outset; 
border-color:white; 
background-color:tan; 
layer-background-color:tan; 
color:black; }

ШАГ 4.
Осталось только в подвале сайта добавить тeг со следующими параметрами:

1

<div id="navtxt" class="navtext" style="position: absolute; top: -100px; left: 0px; visibility: hidden;"></div>

Как пользоваться скриптом?

Что бы использовать функции данного скрипта при написании текста, делаем следующее. Пишем любой текс а далее зачлючаем его в тег со следующими параметрами:

1

<a href="javascript:void(0)" onmouseover="writetxt('Здесь будет любой всплывающий текст')" onmouseout="writetxt(0)">Наведи курсор на меня</a>

В общем это будет выглядеть так:

Пример работы скрипта.

Для данной цели можно использовать плагин Tooltip. Но лучше использовать скрипт.

Плагин Tooltip.

Плагин Tooltip позволяет при наведении на текст выводить текстовые подсказки.

Настраивать ничего не нужно. После активации он уже сразу рабочий.
Заходите в визуальный редактор текста. В панели инструментов у вас появится вот такой значок:

Как выглядит значок плагина в редакторе.

Вот так он выглядит в работе:

Плагин Tooltip в работе.

Автор блога, Александр Рус.

Материалы по теме:

Плагин Simple Local Avatars для создания локального аватара в своем профиле на блоге.

Всем привет! Сегодня мне попался плагин, который чем то напоминает Gravatar, когда оставляешь комментарий, а вместе с ним остается и твоя аватар ка. Только здесь намного ...

Как разместить рекламный блок в середине статьи. Плагин Shortcoder.

Добрый вечер! Последние пару недель я уделил монетизации сайтов. Зарегистрировался в Gogetlinks и Google Adsense. Давно хотел это сделать, но никак не решался, ждал момента ...

Плагин WP Realtime Sitemap.

Добрый день! Ну и  перерыв чик  я себе устроил, не писал  аж  целых два дня. Отдохнул, набрался сил и готов к работе. Точнее это будет ...

Как установить и активировать плагин на WordPess.

Всем добрый вечер! Сегодня под устал чуток, совсем чуток, поэтому решил сильно себя не изматывать и написать простенькую статью, про то, какими способами можно ...

Делаем красивое визуальное оформление для текста. Плагин Drop Shadow Boxes для WordPress.

Всем добрый день! Для начала, я хотел бы сообщить Вам приятную новость, нашелся человек, который решил про спонсировать конкурс на моем блоге на 300 ...

Нажимая на кнопку, я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности.