Книга: HTML, XHTML и CSS на 100%

Альтернативный текст

Альтернативный текст

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

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

В таких ситуациях может помочь атрибут alt. Его значение – текст, который будет показан при наведении указателя мыши на картинку или если картинка не загрузится. Это даст возможность пользователям, которые не видят картинок, понять, хотят ли они увидеть их вообще, а тем, кто видит, поможет понять, что именно они видят.

В листинге 4.7 приведен пример кода для задания альтернативного текста.

Листинг 4.7. Альтернативный текст

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src="image.jpg" width="100" align="right" vspace="50" hspace="50" alt="Фотография карликового вислоухого кролика"/>

</body>

</html>

На рис. 4.7 показан результат обработки кода из листинга 4.7 при условии, что изображение загрузилось.


Рис. 4.7. Альтернативный текст при загруженном рисунке

Альтернативный текст всплывает при наведении указателя мыши на картинку.

На рис. 4.8 показан результат обработки кода из того же листинга, но в случае, когда изображение не загрузилось.


Рис. 4.8. Альтернативный текст при незагруженном рисунке

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

Оглавление книги


Генерация: 1.130. Запросов К БД/Cache: 3 / 0
поделиться
Вверх Вниз