Nice titles по-русски

22 Sep, 2004

Как то в последнее время я зачастил описывать известные техники в веб-разработке. Логичным продолжением стал и этот пост. Кому то может пригодится игры с атрибутом title для ссылок (и не только). Здесь можно ознакомиться с оригинальной статьей.

Что дает?

Давайте сразу посмотрим что же нам даст эта техника, хотя лучше это называть скриптом. Вот пример использования. Вы заметили как изменился атрибут title, теперь вместо всплывающей подсказки с желтоватым фоном мы видим красивое миниокошко, еще и полупрозрачное(не для ИЕ). Конечно надо 10 раз подумать прежде чем использовать этот скрипт. Далеко не всем сайтам он подойдет. Но тем не менее...
Вот как это выглядит, если вы по каким-либо причинам не увидели в примере:

Вот как это выглядит

Что происходит?

Скрипт пробегает по всем ссылкам на странице и находит те у которых указан атрибут title, после чего заменяет его на атрибут nicetitle. Это делается для того что бы избежать всплывания старых title. Ведь теперь всплывать будут новые и красивые. Кроме того, скрипт начинает "слушать" у каждой ссылки события onmouseout(указатель мыши не наведен), onmouseover (мышь наведена на ссылку), onblur (ссылка не в "фокусе"), и onfocus (ссылка в "фокусе", то есть вы нажимаете на TAB на клавиатуре, и когда доходит очередь до ссылки она оказывается в "фокусе").

Когда происходят события onmouseover/onfocus скрипт показывает DIV в котором содержится собственно "nicetitle", то есть title и адрес куда указывает ссылка.

А по событию onmouseout/onblur скрипт убирает этот DIV. Всплывающее окошко выглядит полупрозрачным так как фоном для него служит полупрозрачная PNG картинка.

Всплывающее окно не использует ни docwrite ни innerHTML, а использует лишь DOM. Что фатически означает, что этот прием будет работать во всех браузерах поддерживающих DOM(на сегодняшний день это большинство).

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

Использовать как всегда просто.
Все что нужно скачать два файла nicetitles.js и nicetitles.css. (их вы можете найти в ЗИП фалйле в конце)

Затем у странички, для которой вы хотите сделать красивые всплывающие подсказки, укажите сылку на этот скрипт и эту стилевую таблицу. И еще один нюанс — нужно в стилях nicetitles.css указать путь к картинке которая будет служить фоном для всплывающих подсказок. Я использовал полупрозрачную картинку.

После этого все ссылки с атрибутом title будут выглядеть при наведении мыши примерно так:

Nicetitle в действии

Вот собственно и все. Можно поиграться с картинкой и получить круглые края, или другие эффекты. Но это уже намного проще чем провернуть такой метод сначала.

По теме

5 комментариев к “Nice titles по-русски”

1.Vanav | 23 Sep, 2004
Знаем, делали. Самый большой минус - всплывающие окошки (по технологии copy/paste) очень тяжелые эмоционально: - большой размер; - контрастный цвет; - крупный текст. Лично я таких подсказок боюсь :) Второй минус: некоторые делают так, что подсказка перемещается влед за мышкой. Это очень неудобно, она не должна дрожать перед глазами. Наименее распространённая ошибка: отсутствие задержки перед появлением подсказки. Всегда должно быть не менее 200 мс. Для тех, кто любит эффекты: прозрачность и тень можно сделать для большинства браузеров (IE, Moz., Safari и т.п.), но не переусердствуйте (см. пункт 1).
2.akella | 23 Sep, 2004
Да согласен, но самый большой плюс — это гибкость. Идея классная, и хотя использовать надо осторожно, но ведь наши блоги и есть место для экспериментов. Можно и попугать юзера, что б не расслаблялся. Честно говоря, некоторые украинские сайты пугают меня куда больше чем nicetitles. И как это ни прискорбно сознавать подвижникам минимализма, мелкие навороты приходятся основной массе по вкусу. Вобщем все упирается в аудиторию... Кстати тут еще много интересных идей и готовых скриптов, тебе как ЖС-еру должно быть интересно...
3.Дмитрий | 18 May, 2006
есть гораздо более эффективное решение - boxOver, применяемый не только к элементу A но к любому элементу имеющему title. http://boxover.swazz.org/
4.akella | 18 May, 2006
Спасибо за линк, но боюсь в данном случае говорить о "гораздо более" не совсем корректно. Просто он другой. И для других целей. И делает несколько другое. Потому сравнивать их бессмысленно. Как минимум он обязывает нас заполнять атрибут тайтл какими то специфическими текстами. В моем же случае напротив ничего не надо делать. В любом случае спасибо!
5.Алексей | 17 May, 2012
А как бы не показывать ссылку? а то как то не красиво. в окошечке этом и тайтл и ссылка. бе. в js коде не нашел как убрать