Прихожая
Шаг 1: Создаем сайт
Шаг 2: Размещаем в интернет
Шаг 3: Раскручиваем сайт
Шаг 4: Зарабатываем
Заметил ошибку? Выдели и нажми ctrl+enter

Простой способ создания всплывающих подсказок

В данном небольшом уроке, я хочу поделиться с Вами одним достаточно простым, но в то же время кроссбраузерным способом создания всплывающих подсказок.

Вы можете увидеть пример подсказки наведя курсор мыши на слово "кроссбраузерным"(в первом абзаце урока) .

При наведении на заданное слово, возле курсора появляется вопросительный знак, и через доли секунды всплывает заранее подготовленный текст подсказки к этому слову.

Сейчас в сети можно встретить массу способов создания всплывающих подсказок: одни из них, реализованы на JavaScript, другие - связаны со слоями в CSS, третьи - используют современный фреймворк Jquery. Да, возможно они более красивы, но как правило, есть проблемы с их отображением в различных браузерах.

Я предлагаю простой метод, основанный на использовании html-тега ACRONYM- который показывает, что текст, является сокращением. У данного тега, есть полезный атрибут - title - в котором, собственно, и содержится текст подсказки.

Пример:

<acronym title="сокращение от Content Management System">CMS</acronym>

т.е. просто заключаем нужное слово в теги acronym, а в атрибуте title пишем подсказку к этому слову.

Также, желательно как-то выделить это слово. Обычно его делают немного другим цветом с пунктирным подчеркиванием. Не помешает изменить и вид стандартного курсора, при наведении на данное слово, чтобы, например, возле курсора появлялся знак вопроса.

Все это делается через стили, буквально несколькими строчками. Итак, в файле CSS, который отвечает за оформление Вашего сайта, пишем следующее правило:

acronym {
border-bottom: 1px dashed green; /* Подчеркивание текста */
color: maroon; /* Цвет текста */
cursor:help; /* Меняем стандартный курсор */
}

В результате получим следующее:

CMS

Ну вот в принципе и все! Пользуйтесь!

Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ

 Создан: 2010-01-17      Просмотров: 28546      Автор:Андрей Галямов

Оцените урок:    1    2   3   4    5     

Комментарии:

Автор: Андрей
Дата : 2010-01-18

Молодец на все 100%. С твоих уроков я год назад начинал, теперь уже есть сайт 4 месяца назад. Готовлю новый сайт, обязательно упамяну тебя.

Автор: Наталья
Дата : 2010-01-18

Уважаемый Андрей это очень хорошо что вы помогаете людям ,во всём интернете только ваши уроки доступны и написны понятным языком, спасибо вам за это

Автор: Дмитрий
Дата : 2010-01-18

А Евгений Попов учит лучше! www.ruseller.com

Автор: Максим
Дата : 2010-01-18

я не знаю кто лучше, но я знаю одно, все что я уже сделал я сделал благодаря Андрею!!!!!Спасиб тебе!

Автор: san4izl
Дата : 2010-01-18

Андрей, спасибо вам за ваши уроки. Тоже очень много чего узнал с вашего сайта. Но хотел бы поделиться еще одним ресурсом, для начинающих верстальщиков очень может пригодиться: сделайсайт.ком. Не зачтите за спам, просто хочу поделиться хорошим ресурсом. Андрей, а вам очень большое спасибо!!!!!!!

Автор: unibrong
Дата : 2010-01-18

Спасибо, за уроки! Это единственная рассылка которую я не удаляю ))) очень помагает!

Автор: Сергей
Дата : 2010-01-18

Спасибо Андрей! Очень помогли Ваши уроки! А Вы из г. Харькова?

Автор: Виктор
Дата : 2010-01-18

Хорошие у тебя советы, как раз будет кстати моим навыкам вэб программиста, а то знаю программирование PHP и MySQL, и давно бы уже сайты клипал на них, а вот фантазии не хватае. А благодаря твоим подсказкам и советам можно будет разукрасить и зделать удобным для использования сайт, если конечно придумаю о чем его писать)

Автор: Дима
Дата : 2010-01-18

Мне кажется что Андрей и так большой молодец!А насчёт Евгения Попова,я конечно соглашусь,он тоже учит хорошо,однако Андрей размещает то,что нельзя найти у других(в том числе у Евгения),мне кажется только за эту уникальность можно ставить высший балл! Андрей,ты молодец!

Автор: Дима
Дата : 2010-01-18

кстати, Андрей,копирайт исправь,2009 на 2010

Автор: belchik
Дата : 2010-01-18

Спасибо огромное! У Вас прекрасно все получается и дикция и скорость и тембр прекрасный все очень доходчиво. Просьба, может сделаете урок по Camtasia Studio. В Вашем исполнении это будет лучше.

Автор: Юрий
Дата : 2010-01-18

Очень благодарен и признателен! Вы отлично донесли Ваши знания.

Автор: Сергей
Дата : 2010-01-18

Интересно

Автор: Виктор
Дата : 2010-01-18

Друг, подскажи пожалуйста как сделать так что бы ссылки не подчеркивались?? the_victor@cabletv.dp.ua

Автор: Владимир
Дата : 2010-01-18

Суппппппппер на основе Ваших уроков с нуля создал домашний сайт с нуля и без проблем!

Автор: Альфред
Дата : 2010-01-19

Просто и красиво. Спасибо.

Автор: Евген
Дата : 2010-01-19

Виктор. для ссылок пиши стиль A { text-decoration: none; /* Убираем подчеркивание у ссылок */ } A:hover { text-decoration: underline; /* Добавляем подчеркивание при наведении курсора мыши на ссылку */ } с псевдо классами сам разберешься

Автор: Дмитрий
Дата : 2010-01-20

Сэнкс!!!!

Автор: Евгений
Дата : 2010-01-22

Хм.... на счет Евгения Попова, я думаю что Андрей как раз таки и учился у него, даже по стилю сайта и некоторым мелочам на сайте это заметно (не ну правда же), но то что он не остановился на достигнутом и учит людей разбираться в сайтостроении это огромный плюс. Попов тока это все продает, а Андрей преподносит даром. Ну может у Попова навыка побольше, а в целом я за zvirec.com. Кстати, Андрей пора бы уже продавать свои навыки, хотя и это у тебя в мыслях давно уже есть, дело наверное в аудитории, ну я про то что ты сейчас набираешь рейтинг (это по любому так), и это очень грамотно. А потом можно будет толкать свои знания за приличные бабки. Я думаю много людей бы приобрело полноценный диск. Что же, желаю удачи тебе, больше материала, и конечно качественного, впрочем у тебя с этим все в порядке и высоких продаж в будущем.

Автор: Андрей
Дата : 2010-01-23

Сделал всё как по уроку, подсказка работает, только знак вопроса не появляется. ((( Сайт: http://www.attestacia2010.ru

Автор: Виктор
Дата : 2010-02-03

Интересно...

Автор: pawel
Дата : 2010-04-04

если у меня все получится обязательно отблагодарю. а пока ты просто супер!!!!!!!!!!!!!!!!!!!!!!

Автор: webby
Дата : 2010-06-21

мелочь, а приятно... спасибо

Автор: Юра
Дата : 2010-08-15

хороший урок как и все остальные.

Автор: Zero
Дата : 2010-10-17

Сегодня возникла необхдимость сделать всплывающие подсказки. Я был Уверен что лучшие и простые варианты найду на этом сайте! Молодец! Звирик вне конкуренции!

Автор: Евражка
Дата : 2010-10-26

А можно как-то поменять цвет и шрифт в самой подсказке? и откуда берется курсор со "?" - он существует стандартно или можно свою картинку вместо него подставить?

Добавить комментарий:

Ваше имя:

Комментарий:

Введите сумму чисел с картинки (проверка от автороботов):

Поиск по сайту