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

Влад Мержевич

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

Рис. 1. Альтернативный текст до загрузки изображения

Некоторые браузеры, в частности Internet Explorer, также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение (рис. 2).

Рис. 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 обязательно должен быть взят в кавычки.

Статья опубликована: 06.09.2005

Последнее обновление: 07.02.2008

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

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

Abra

23.01.2007

Какая разница между Alt и Title?

Влад Мержевич

24.01.2007

alt - альтернативный текст, title - всплывающая подсказка. В браузере IE разницы между ними никакой особо не заметно, в остальных браузерах есть, особенно при отключении картинок.

Mikhail

03.05.2007

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

Влад Мержевич

03.05.2007

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

Mikhail

04.05.2007

Тут http://www.mezzoblue.com/tests/revised-image-replacement/ я нашел описания без Java с использованием css, но по английски там все, а я уже привык Вашим подробным описаниям на русском

CoLT

24.12.2007

Как можно с помощью css задать alt и title?

a.news {
background: url('img/site/news.jpg');
display: block;
width:269px;
height:54px;
}

Влад Мержевич

25.12.2007

Да собственно никак.

Иван

01.02.2008

Что то непонял.
Тема называется альтернативный текст.
А как же алтернативный текст через CSS к картинке приписать?

Анна

07.02.2008

А как можно сделать,чтобы не высвечивался ни альтернативный текст, ни обычная подсказка, если картинка является входном на другую страничку?

Иван

11.02.2008

Я так думаю достаточно не заполнять данные поля

Элеметарно

Vitos

31.03.2008

CoLT, в CSS ты не сможешь задать alt и title. тебе это нужно это прописать в HTML-коде где у тебя стоит эта картинка.

Tasha

04.04.2008

Влад, подскажите пожалста, как оставить альт в коде (для поисковиков), но что на странице он не всплывал? Потому как я использую скрипт всплывающей подсказки. Как-то нехорошо обе всплывают..

alex_ez

01.05.2008

Tasha: удаляй его тем же скриптом при загрузке или отображении твоей подсказки.

Shkur

21.05.2008

Как изменить вид всплывающего title="....." через CSS ???

Baur

20.06.2008

Привет, я хочу использовать title как пояснительный некторым терминам,
Возможно ли сделать так чтобы ссылка никуда не ссылал, я пробовал href="#" но таком случае получается это аналог #топ (ссылает на начало страницы)
Как можно организовать пояснительные подсказки при этом никуда не ссылая?

Spasibo

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

Комментарии к статье

Добавить комментарий