Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Добавляем всплывающую подсказку к картинке

Раздел: 

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

Как добавить всплывающую подсказку к изображению?

новая ссылка на кракен.

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

Задача

Настроить появление всплывающего комментария.

Решение

Добавляется такая подсказка с помощью атрибута title. Важно также знать ведущую роль, которую отыгрывает данный атрибут, и соответственно подсказка для вывода картинок. Согласно спецификациям, при выводе изображения с помощью тега img, для него обязательно должен быть прописан атрибут title с поясняющим комментарием, в противном случае код может не пройти проверку валидации. Также поисковые системы в приоритет ставят те ресурсы, у которых валилдный код.

Содержимым такой подсказки зачастую служить небольшое словосочетание, которое поясняет смысл определенного объекта. Сам текст должен располагаться внутри кавычек. Пример использования приведен ниже

HTML

<img src="image.jpg" width="200" title="Переписование текста">

Вот как это будет выглядеть в браузере

Пример вывода всплывающей подсказки

Напоследок замечу, что каждый браузер по своему выводит всплывающий комментарий.