Веб-компас сайтостроителей
Всплывающая подсказка
Допустим нам нужно сделать на сайте краткое пояснение некоторых слов в текстовом содержимом. Это можно сделать несколькими способами, но мы рассмотрим пример всплывающей подсказки реализованной с помощью каскадных таблиц стилей.
Вспомним элемент <a>, у которого есть несколько псевдоклассов, один из них hover, который мы и будем использовать. Слово, которое мы хотим пояснить всплывающей подсказкой при наведении курсора на него мышкой, поместим в элемент <a>, а чтобы пользователь не ушел случайно неизвестно куда, укажем в качестве адреса символ "#". Саму подсказку поместим в элемент <span>. То есть получим следующий HTML-код
Чтобы отделить элемент <a> от других мы также указали ему класс "vsl_help". Но при просмотре данного кода вы, конечно, не увидите всплывающих подсказок. Текст подсказки просто будет отображаться на экране. Чтобы они правильно отображались нужно сейчас поработать со свойствами.
Во-первых, нужно отключить видимость подсказки в исходном состоянии, это мы сделаем следующим образом
Придадим нашему слову, требующему пояснения, соответствующий вид: окрасим в черный цвет (цвет текста по умолчанию в большинстве браузеров), заменим подчеркивание, ассоциирующееся со ссылкой, на подчеркивание штрихпунктирной линией, чтобы пользователи отличали данное слово от других.
Теперь давайте подумаем, что мы хотим? Подумали?! Наверное, мы хотим, чтобы подсказка была или выше или ниже нашего слова, а это можно реализовать элементом, который абсолютно позиционирован. Так и сделаем
Теперь для псевдокласса hover элемента <a> элемент <span> будет иметь выше приведенные свойства. Разберем их.
Свойство "position: absolute" делает элемент с подсказкой абсолютно позиционированным. Свойство "display: block" делает подсказу видимым. Свойствами "left:10px; top:-16px;" устанавливаем позицию элемента. Свойством "white-space: pre" запрещаем перенос слов на новую строку. Остальные свойства задают внешний вид нашего элемента с текстом подсказки.
Но и это еще не все. Мы определили элемент <span> абсолютно позиционированным, также нужно еще задать псевдоклассу элемента <a> относительное позиционирование. Тогда элемент <span> будет абсолютно позиционирован относительно "a.vsl_help:hover", и наши указанные выше значения "left:10px; top:-16px;" будут работать, так как мы это задумали.
В итоге получим следующий код
Посмотреть работу данного примера можно тут.
Можно вставлять несколько подсказок на странице. Достаточно будет поясняемое слово поместить в элемент <a> с классом "vsl_help", а саму подсказку - в элемент <span>, так как это было сделано выше.
Вспомним элемент <a>, у которого есть несколько псевдоклассов, один из них hover, который мы и будем использовать. Слово, которое мы хотим пояснить всплывающей подсказкой при наведении курсора на него мышкой, поместим в элемент <a>, а чтобы пользователь не ушел случайно неизвестно куда, укажем в качестве адреса символ "#". Саму подсказку поместим в элемент <span>. То есть получим следующий HTML-код
Код
В современных условиях веб-строительства все больше появляется необходимость разделения содержимого страницы и способов его оформления. Так как такой подход позволяет максимально быстро и эффективно создавать и развить веб-сайты, за счет того что программисты и дизайнеры выполняют свою работу практически независимо друг друга.
Подобная реализация возможно не без помощи <a href="#" class="vsl_help">CSS<span> Каскадные таблицы стилей</span></a>. CSS позволяют задать параметры оформления содержимого страницы в одном месте, после чего они будут автоматически применяться к содержимому веб-страницы.
Чтобы отделить элемент <a> от других мы также указали ему класс "vsl_help". Но при просмотре данного кода вы, конечно, не увидите всплывающих подсказок. Текст подсказки просто будет отображаться на экране. Чтобы они правильно отображались нужно сейчас поработать со свойствами.
Во-первых, нужно отключить видимость подсказки в исходном состоянии, это мы сделаем следующим образом
Код
a.vsl_help span { display:none;}
Придадим нашему слову, требующему пояснения, соответствующий вид: окрасим в черный цвет (цвет текста по умолчанию в большинстве браузеров), заменим подчеркивание, ассоциирующееся со ссылкой, на подчеркивание штрихпунктирной линией, чтобы пользователи отличали данное слово от других.
Код
a.vsl_help { text-decoration: none; color:#000; border-bottom: dashed 1px #000; }
Теперь давайте подумаем, что мы хотим? Подумали?! Наверное, мы хотим, чтобы подсказка была или выше или ниже нашего слова, а это можно реализовать элементом, который абсолютно позиционирован. Так и сделаем
Код
a.vsl_help:hover span { position:absolute; display:block; left:10px; top:-16px;
border:solid 1px #000; background:#ddd; color:#000; white-space:pre; padding:1px; }
Теперь для псевдокласса hover элемента <a> элемент <span> будет иметь выше приведенные свойства. Разберем их.
Свойство "position: absolute" делает элемент с подсказкой абсолютно позиционированным. Свойство "display: block" делает подсказу видимым. Свойствами "left:10px; top:-16px;" устанавливаем позицию элемента. Свойством "white-space: pre" запрещаем перенос слов на новую строку. Остальные свойства задают внешний вид нашего элемента с текстом подсказки.
Но и это еще не все. Мы определили элемент <span> абсолютно позиционированным, также нужно еще задать псевдоклассу элемента <a> относительное позиционирование. Тогда элемент <span> будет абсолютно позиционирован относительно "a.vsl_help:hover", и наши указанные выше значения "left:10px; top:-16px;" будут работать, так как мы это задумали.
Код
a.vsl_help:hover { position:relative; }
В итоге получим следующий код
Код
<html>
<head>
<title>Всплывающие подсказки</title>
<style>
body { font-family: verdana, sans-serif; font-size:13px; }
a.vsl_help { text-decoration:none; color:#000; border-bottom:dashed 1px #000; }
a.vsl_help span { display:none;}
a.vsl_help:hover { position:relative; }
a.vsl_help:hover span { position:absolute; display:block; left:10px; top:-16px;
border:solid 1px #000; background:#ddd; color:#000; white-space:pre; padding:1px;}
</style>
</head>
<body>
В современных условиях веб-строительства все больше появляется необходимость разделения содержимого страницы и способов его оформления. Так как такой подход позволяет максимально быстро и эффективно создавать и развить веб-сайты, за счет того что программисты и дизайнеры выполняют свою работу практически независимо друг друга.
<br> Подобная реализация возможно не без помощи <a href="#" class="vsl_help">CSS<span> Каскадные таблицы стилей</span></a>. CSS позволяют задать параметры оформления содержимого страницы в одном месте, после чего они будут автоматически применяться к содержимому веб-страницы.
</body>
</html>
Посмотреть работу данного примера можно тут.
Можно вставлять несколько подсказок на странице. Достаточно будет поясняемое слово поместить в элемент <a> с классом "vsl_help", а саму подсказку - в элемент <span>, так как это было сделано выше.
- Статью добавил пользователь
- Категория
- Дата размещения 03.07.2008, просмотров 12710
Еще статьи из данной категории
Предыдущие статьи
Следующие статьи
- нет
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.
В Опере всплывающая подсказка обрезалась размерами блока бегущей строки, а в ИЕ уезжала в бок перед первой новостью в бегущей строке и скрывалась за левой границей блока бегущей строки. Если что-нибудь знаете по решению данной проблемы, напишите пожалуйста. Было бы классно, если бы можно было как-то влиять на отображение параметра title тега <а>. Хотя бы как его заставить не исчезать в
ИЕ и Мозилле.
мозилла текст подсказки выдает как видимый текст рядом с картинкой
как это решить?
С уважением,
Александр П.