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

За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс hover. Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие.

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

Для добавления рамки вокруг картинки применяется стилевой атрибут border, который следует добавлять к селектору IMG. В качестве значения одновременно указывается толщина границы, ее стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать IMG {border: 2px solid #ff0000;}.

В примере 1 приведен полный код для добавления рамки к изображениям на странице.

Пример 1. Добавление рамки

Альтернативный текст показывается на месте изображения в момент его загрузки или недоступности. В общем, в те моменты, когда картинка по каким-либо причинам не видна. Обычно это случается, если пользователь отключил показ изображений в браузере или при медленном соединении с сайтом. Альтернативный текст добавляется через параметр alt тега <IMG> и является обязательным согласно спецификации HTML и XHTML.

В примере 1 показано добавление альтернативного текста к рисунку.

Слэш (символ /) перед именем файла или папки обозначает, что отсчет ведется от корня сайта. Соответственно, путь /images/pic.gif следует понимать так. В корне сайта находится папка с именем images, а в ней располагается файл pic.gif. Данный способ записи работает под управлением веб-сервера, поэтому на локальном компьютере браузер интерпретирует путь как c:/images/pic.gif, а такой папки и файла, вероятнее всего, нет (пример 1).

Пример 1. Путь к файлу относительно корня сайта

При добавлении картинок с помощью программ для редактирования HTML-документа, программы нередко указывают локальный путь к графическому файлу, который начинается с ключевого слова file:///. Например, рисунок находится по адресу c:\www\images\sample.gif, тогда путь к нему будет записываться как file:///c:/www/images/sample.gif. Браузер при открытии документа просматривает путь и ищет по указанному адресу изображение.

Для добавления изображения в документ применяется тег <IMG>, его параметр src определяет путь к графическому файлу, который должен быть в формате GIF, PNG или JPEG. Также для тега <IMG> необходимо указать обязательный параметр alt, он описывает альтернативный текст, видимый при загрузке изображения или отключении картинок в браузере.

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

Рассмотрим несколько способов добавления горизонтальных линеек на веб-страницу.