Настраиваем всплывающую подсказку
Люблю я всякие красивые эффекты. Ради них даже попробовал Windows 7, и так и остался на ней… Увидев на чьем-нибудь сайте красивый эффект, внутри меня как-будто кто-то начинает кричать “хочу, хочу себе такой же”, наверное это не правильно, но тем не менее я лезу в исходный код чужого сайта, его CSS, и копаюсь там, пока либо не нахожу искомое, либо какие-либо его признаки, по которым его уже можно найти в сети. Как правило в конце-концов я нахожу то что хотел, и один из моих сайтов получает в свое распоряжение бесполезный, но красивый эффект. Если Вы периодически ощущаете такие же чувства, то нам по пути.
Недавно обратил внимание на то, что на некоторых сайтах всплывающая подсказка нестандартна – изменены фон, цвет шрифта, а кое-где и была добавлена прозрачность. И конечно же мне захотелось заполучить такой эффект на свой сайт, где картинки преобладают на текстом. Захотелось – получил.
Порывшись в сети я нашел два способа настраивания всплывающей подсказки, через java-скрипт и через фреймворк jQuery.
Первый способ работает для настройки сразу всплывающих подсказок сразу у всех ссылок на сайте, а второй только для тех, который находятся в блоке с определенным идентификатором (поэтому я сейчас рассмотрю лишь вариант с java-скриптом), да и если Вы кроме этого эффекта не собираетесь ничего делать при помощи jQuery, то все-таки лучше выбрать вариант с java-скриптом, так как он банально весит меньше, по сравнения с библиотекой необходимой для работы с jQuery и самим скриптом.
Настраиваем всплывающую подсказку при помощи java-скрипта
Автором оригинального скрипта позволяющим реализовать всплывающую подсказку является Пол Соуден, а его руссификацию и исправление некоторых ошибок сделал , за что ему большое спасибо.
Настройка всплывающей подсказки осуществляется в два этапа:
1. Скачиваем java-скрипт, заливаем его в папку сайта, и подключаем его к шаблону в пределах тега <head>
У меня, на Wordpress это выглядит так:
<script language=”javascript” type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/js/tooltip.js”></script>
2. Настраиваем визуальное отображение всплывающей подсказки в CSS файле. Для этого нам необходима задать описание #tooltip. У меня это описание выглядит так:
#tooltip{
background:#999;
border:1px solid #000;
color: #000;
margin:0px;
padding:3px 6px;
position:absolute;
visibility:hidden;
z-index: 10;
opacity:0.8;
-moz-opacity:0.8;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
На всякий случай разберем что здесь что:
background – фон всплывающей подсказки
border – рамка подсказки
color – цвет текста подсказки
margin – отступ каждого края элемента
padding – отступы внутри элемента, в нашем случае подсказки (первое число – отступ снизу и сверху, второе отступ справа и слева)
position – способ позиционирования объекта, у нас указано absolute, это значит, что все остальные элементы страницы ведут себя так, как будто элемента с этим атрибутом и не существует
visibility – делает наш элемент прозрачным
z-index – означает то, что наша подсказка должна появляться поверх всего остального, 10 взяли для запаса (рерайт строки с другого сайта, сам не до конца разобрался зачем это надо)
opacity – уровень прозрачности элемента, колеблется от 0(полностью прозрачный) до 1(совсем не прозрачный)
-moz-opacity – тоже самое, только в частном порядке для FireFox
-moz-border-radius – радиус скругления углов элемента для FireFox похожих для на него
-webkit-border-radius – радиус скругления углов элемента для Google Chrome и Safari (webkit, ага)
Настраиваем как душе угодно и наслаждаемся результатами своей работы.
Если же Вам все таки хочется узнать как настроить подобный эффект при помощи jQuery, то знакомимся со статьей .
—–
Собираетесь заняться продвижением в буржуйнете и ищете каталог статей, чтобы запостить свои оптимизированные статьи? seocity.net к Вашим услугам.
Любителям авто предлагают посетить auto.irr.ru – автомобильный портал, от знакомой многим газеты – “Из рук в руки”
Его величество Случай решил, что Вам это будет интересно:
Март 27th, 2010 at 21:58
Что-то у меня не отображается, как у Вас. Просто стандартное всплывающее окошко открывается….
Март 27th, 2010 at 22:36
Какой у Вас браузер? Я проверял в IE 8, FireFox, Google Chrome и Opera, везде работает, только в IE не работает прозрачность.
Март 29th, 2010 at 18:48
[...] Keyword filter – фильтр по ключевым словам, можно указать слова, по которым будут отбираться записи для анонса на Twitter. Проверку на совпадение по ключевым словам можно включить для рубрики, названия постов, текста поста и всего сразу. Например если включить выбрать ключевое слово “Настраиваем”, и включить проверку по названиям постов (the title), то для публикации анонса в Twitter останется только одни мой пост – Настраиваем всплывающую подсказку. [...]
Март 30th, 2010 at 17:21
Проверил, даже в ie6 работает, только без прозрачности и без скругления углов.
Март 30th, 2010 at 19:49
У меня в FireFox-е всё получилось, теперь радуюсь.
Март 31st, 2010 at 13:12
У кого не работает, удостоверьтесь, что у вас включен Javascript!
Апрель 4th, 2010 at 18:47
javascript – это язык программирования,а jQuery это библеотека(фреймворк) который так же использует javascript
Апрель 4th, 2010 at 21:07
Grenadier – спасибо. Поправил, запомнил.
Апрель 14th, 2010 at 15:44
А лично я не люблю все эти левые красивости, пусть все будет строго и понятно. Ну разве что немного красивости можно, но только совсем чуть чуть)