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