Видеокурс по созданию сайтов | Создаем всплывающие подсказки. Зачем они нужны на сайте? Нестандартные способы создания всплывающ

Видеокурс

Доступность и привлекательность текста

Комментарии к видеоурокам

Урок #9. Создание привлекательных всплывающих подсказок.
20 минут

Комментарий к видеоуроку содержит текстовое изложение решения задачи.

Зачем нужны подсказки на сайте?

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

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

Сравните два варианта подсказок (просто наведите курсор мыши на ссылку):

1. Стандартный способ создания подсказки с помощью title:

<a href="#" title="Научитесь создавать сайты за сутки. Возможно ли это?">Вышел новый обучающий курс на DVD.</a>

2. Создание всплывающей подсказки с помощью тега span или b:

HTML-код:
<a href="#">Вышел новый обучающий курс на DVD.<b>Научитесь создавать сайты за сутки. Возможно ли это?</b></a>

CSS:

b {
display: none;
}

a:hover b {
display: block;
width: 440px;
position: absolute;
left: 410px;
border: 3px groove;
margin-top: -65px;
padding: 10px;
background-color: #DEF0FC;
}

В таблице стилей устанавливаем ширину подсказки, ее фон, границы, место.

Интересная особенность IE 6.0. Подсказка не появится, пока вы не добавите правило:

a:hover {
background: none;
}

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

Статьи