- Особенности веб-графики
- Добавление рисунка на веб-страницу
- Альтернативный текст
- Изменение размера рисунка
- Рамка вокруг изображений
- Обтекание рисунка текстом
- Отступы вокруг рисунка
- Выравнивание изображения по центру
- Сглаживание краев
- Замена текста изображением
- Прозрачность в рисунках
- Полупрозрачный слой с непрозрачным текстом
- Создание паспарту
- Добавление тени к рисунку
- Оптимизация графики
- Блок с закругленными уголками
- Эффект перекатывания

Разделы
Альтернативный текст
Метки:
Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением (рис. 1).

Рис. 1. Альтернативный текст до загрузки изображения
Некоторые браузеры, в частности Internet Explorer, также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение (рис. 2). Однако с позиции спецификации HTML это не является правильным.

Рис. 2. Вид всплывающей подсказки
Замечание
Вид всплывающей подсказки, а именно, ее цвет, фон, шрифт и другие параметры задаются с помощью настроек операционной системы и не могут быть изменены через HTML-файл.
Для создания альтернативного текста используется параметр alt тега <IMG>, как показано в примере 1.
Пример 1. Добавление альтернативного текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Альтернативный текст</title>
</head>
<body>
<p><a href="index.html"><img src="home.gif"
alt="Возврат на главную страницу"></a></p>
</body>
</html>
Замечание
Текст в параметре alt обязательно должен быть взят в кавычки.
Не все браузеры отображают альтернативный текст в виде всплывающей подсказки. Поэтому для ее создания используется параметр title (пример 2).
Пример 2. Всплывающая подсказка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Всплывающая подсказка</title>
</head>
<body>
<p><a href="index.html"><img src="home.gif"
alt="Вернуться на главную страницу" title="Главная страница"></a></p>
</body>
</html>
Как показано в данном примере, значения у параметров alt и title может различаться, что позволяет установить определенный текст для разных случаев. Только учтите, что длинный текст будет «обрезаться» и целиком не показывается. Но поисковые системы, для которых иной раз и применяют параметры title и alt, вполне читают подобный текст.

Отправить комментарий