Разделы

Замена текста изображением

Метки:

фон

Ограничения, накладываемые на HTML, не позволяют задавать для текста любой шрифт установленный в системе, поскольку не гарантируется, что такой же шрифт имеется и у пользователя сайта. Поэтому вычурный текст обычно делают в графическом редакторе и вставляют на веб-страницу в виде картинки. Этим обеспечивается единый вид для всех пользователей. Однако и этот вариант имеет недостатки. Во-первых, пользователь может отключить показ рисунков в браузере. Во-вторых, поисковые системы лучше индексируют текст в заголовках и тем самым повышают рейтинг сайта, чем текст в параметре alt. Наилучшим методом будет сочетание заголовка с изображением, при этом текст прячется с помощью стилей, а посетителю показывается фоновая картинка.

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

Метод Лэнгбриджа-Лихи

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

Рис. 1

Рис. 1. Изображение для замены текста заголовка

В стилях для селектора H1 указываем следующий код (пример 1).

Пример 1. Стиль для отображения фоновой картинки

h1 {
  padding-top: 54px; /* Высота изображения */
  height: 0; /* Нулевая высота блока */
  overflow: hidden; /* Скрывает область */
  background: url(head1.png) no-repeat; /* Фоновый рисунок для замены текста */
}

Задача данного стиля — спрятать текст и вывести изображение. Само скрытие происходит достаточно хитро. Вначале текст смещается вниз за счет использования атрибута padding-top со значением, равным высоте нашей картинки. Далее явно устанавливаем нулевую высоту блока заголовка. Высота элемента при этом будет равна 54 пиксела, поскольку складывается из значений height и padding-top. Несмотря на явно заданную нулевую высоту блока заголовка, текст все равно отображается, поэтому прячем его через атрибут overflow со значением hidden. В этом случае становится видна только область внутри элемента заданных размеров. Так как текст смещен вниз, за пределы этих 54 пикселов высоты, то его не видно.

Сама картинка выводится в виде фона с помощью атрибута background, где обязательно надо указать значение no-repeat, чтобы фон не повторялся. Окончательный код с использованием заголовков первого и второго уровня приведен в примере 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>
  <style  type="text/css">
  h1, h2 {
   overflow: hidden; /* Скрывает область */
   height: 0; /* Нулевая высота блока */
  }
  h1 {
   background: url(head1.png) no-repeat; /* Фоновый рисунок для замены текста */
   padding-top: 54px; /* Высота изображения */
  }
  h2 {
   background: url(head2.png) no-repeat;
   padding-top: 28px;
   margin-bottom: 0;
  }
  </style>
 </head>
 <body>
  <h1>История Белоснежки</h1>
  <p>Столкнувшись со сложной задачей создания полнометражного
   мультфильма, Дисней понимал, что имеющиеся технические средства ему 
   не подходят. Тогда он сам придумал и воплотил в жизнь многоплановую 
   камеру, идею которой в той или иной мере используют спустя десятилетия 
   после ее  изобретения.</p>
  <h2>Интересные факты</h2>
  <p>Уолт Дисней специально не смотрел на актрис, которые  
   пробовались на озвучивание роли  Белоснежки. Так он мог объективно 
   оценить голос. Однажды он услышал песню в великолепном исполнении.<br>
   — Ну, как? — спросили Уолта коллеги.<br>
   — Голос хорош, но... староват, — ответил Дисней.</p>
   <p>Эта была 14-летняя Дина Дурбин, впоследствии прославившаяся  
   на весь мир.</p>
  </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2

Рис. 2. Страница с замещенными заголовками

Среди достоинств данного метода — простота и удобство реализации. Внутрь тегов <H1> и <H2> не надо добавлять дополнительных элементов, все делается через стили. Однако метод не работает при отключении картинок в браузере, в этом случае мы увидим пустые прямоугольники.

Zodios, 09.10.2008

Я у себя тоже написал ряд IR способов
http://zodios.net/htmlcss/imagereplacement.html
Кстати рекомендую из кода убрать лишние элементы - title,head... захламляют код, тяжело читать, нужно оставлять только основную суть

Вениамин, 20.04.2009

Я так понимаю, в последнем абзаце как раз вся соль и изложена ;)

Admin, 22.04.2009

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

Михаил, 24.06.2009

У меня вопрос относящийся к теме. Можно ли сделать чтоб юзеры видели текст находящийся под полупрозрачной кнопкой. То есть к примеру если хочешь перейти на страницу профиля пользователя, то щёлкаешь на кнопку находящуюся поверх ника юзера.

Разделы

Термины

Замена текста изображением

Метод Лэнгбриджа-Лихи

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