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

С дивовой версткой я работаю по следующему принципу — все оформление (в том числе графика) через 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, который покажет ваше местоположение в реальном времени.

Комментарии (14)
  1. 1
    Михаил
    @

    Отличная статья! Спасибо! Давно искал метод совмещения логотипа с текстом. Вместо тега ведь можно использовать .

  2. 2
    Михаил
    @

    Хотел написать так: Вместо тега b ведь можно использовать h1

  3. 3

    Пожалуйста, Михаил!

    Да, по идее, вместо тега <b> можно использовать вообще любой, какой наиболее подходит, в том числе и <H1> (главное, чтобы он соответствовал семантике). Только последний, как правило, уже используется в другом месте страницы.

    P.S. Чтобы вывести тег в комментарии, нужно использовать вот такую запись: &amp;lt;b&amp;gt;

  4. 4
    @

    А если логотипом является полупрозрачный png?

  5. 5

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

    Хотя, если задуматься, то можно найти выход и из такой ситуации. Просто добавить между слоем альт-текста и слоем png-изображения еще один слой, для которого указать белый бэкграунд в виде растянутого однопиксельного изображения. Хотя это уже немного похоже на извращение, но в результате будет достигнут нужный эффект.

  6. 6
    @

    На http://tvoibar.ru/, например, никак.
    Лучше, не придумывать костыли, а предупредить читателя, для чего метод не подходит.

  7. 7

    Выход найдется всегда. В вашем случае я бы объединил с логотипом ту часть фонового изображения, которая совпадает с размером лого и сохранил бы его в jpg.

    P.S. С вашей ситуацией не приходилось сталкиваться на практике, поэтому при написании статьи я не мог предусмотреть все «грабли». Я не ясновидящий.

  8. 8
    @

    Еще костыль!
    Там em’ная вертска, и логотип, как вообщем-то все изображения которые представляют из себя текс, зависят от размера шрифта. По увеличивайте его.

    P.S. Для это есть комменты :)

  9. 9

    Учитывая этот «костыль», подтверждаю, что описанный мною метод вам совсем не подходит.

  10. 10
    @

    Да почему же мне?
    Он вообще к таким ситуациям не подходит.

  11. 11
    Mr.KTO

    Спасибо за статью.
    Как раз смотрел как такая фишка сделана у Гугла в поиске, в принципе и так всё понял, но всегда приятней прочитать подробное объяснение.

  12. 12

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

  13. 13
    Yuriy

    думаю, прошли те времена когда нужно было писать cursor: hand; — не валидно ведь

  14. 14

    Да, Yuriy, действительно не валидно. А я даже не знал, поэтому спасибо за подсказку, буду исправляться.

    Вообще, мне пора уже дубль 2 по этой статье писать, теперь более простой код использую.