Альтернативный текст для изображений в блочной верстке

С дивовой версткой я работаю по следующему принципу – все оформление (в том числе графика) через CSS, в HTML же выносятся только изображения, дополняющие текст, изложенный на странице. В связи с этим поведаю о том, каким образом я реализую то, что обозначено в теме поста.

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

Вот так выглядит стандартный способ публикации изображения (возьмем во внимание, что оно одновременно будет являются ссылкой):

<a href="#"><img src="logo.jpg" alt="Логотип" width="150" height="100" border="0" /></a>

Для реализации того же, но с использованием CSS, я использую нижеследующую схему. Ее суть заключается в применении 3-х различных блоков: блок текста (1), блок изображения (2), которые вкладываются в блок ссылки (3).

HTML-код:

<a id="logo" href="#"><b>Логотип</b><i></i></a>

CSS-код для блока ссылки:

#logo {
  display: block;
  position: relative;
  width: 150px;
  height: 100px;
  text-decoration: none;
  cursor: pointer;
}

Данным кодом ссылку мы делаем блоком, указываем ее размеры, задаем свойство position: relative для возможности позиционирования вложенных элементов относительно блока ссылки, убираем подчеркивание и для кроссбраузерности указываем курсор мыши.

CSS-код для блока с альтернативным текстом:

#logo b {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  font-size: 20px;
  line-height: 20px;
}

Этим кодом мы позиционируем альтернативный текст относительно блока ссылки, указываем уровень слоя, меньший слоя с изображением, задаем отступы, и, если нужно, все необходимые параметры для шрифта. Здесь также необходимо указать высоту строки, равной размеру шрифта, чтобы текст не “обрезался” в некоторых браузерах.

CSS-код для изображения:

#logo i {
  display: block;
  position: relative;
  z-index: 2;
  width: 100px;
  height: 140px;
  background: url(logo.jpg) no-repeat;
}

Здесь мы позиционируем блок изображения, указываем ему уровень слоя, больший, чем для блока с текстом, задаем размер, равный блоку ссылки, и само изображение.

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

Плюсы метода:

• Возможность задать гарнитуру, цвет и размер шрифта для альтернативного текста.
• Изображение, как и параметры его представления на странице (за исключением альт-текста), меняются через CSS.

Минусы:

• Значительная разница в размере кода между стандартным и CSS вариантом в пользу первого.

Готовый пример применения данной техники Вы можете увидеть прямо на этой странице – справа вверху, где находится изображение RSS-подписки.

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

* * *

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