Альтернативный текст для графики при использовании CSS

Смотря сегодняшним взглядом на одну их своих предыдущих статей «Альтернативный текст для изображений в блочной верстке«, понимаю, что я переборщил с кодом, как в части HTML, так и в части CSS. Все то же самое можно было сделать гораздо проще. Поэтому данная статья — это дубль 2.

Данная техника, которая используется для создания альтернативного текста к изображениями, выводимым с помощью CSS, называется Image Replacement. По сути мы пишем какой-то текст и накладываем на него слой с изображением, таким образом замещая текст.

Эту технику я использую, как правило, для отображения логотипа сайта, когда верстаю дивами. Реальный пример — RSS-иконка на этом блоге.

HTML

<a id="logo" href="#">Название сайта<b></b></a>

CSS

#logo {
	position: relative;
	cursor: pointer;
}
#logo b {
	position: absolute;
	top: 0;
	left: 0;
	width: 250px;
	height: 50px;
	background: url(i/logo.gif) no-repeat;
}

По сравнению с моим предыдущим вариантом CSS-код сократился раза в два. Остается только добавить оформление шрифта в идентификатор #logo. Я стараюсь делать его максимально, насколько это возможно, схожим с текстом на изображении.

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

* * *

Город Ларнака — древнейший и очень красивый город острова Кипр, замечательное место отдыха и туризма. Цены Ларнака являются приемлемыми для большинства отдыхающих. Туры в Ларнаку доступны в любое время года.

Комментарии (20)
  1. 1
    Александр

    Странный результат выходит однако, :) как позиционировать этот Лого-блок? я что-то не могу додуматься, видать знаний моих в верстке не хватает :(

  2. 2

    Не понимаю, в чем у вас затруднение. Вставляете вышеуказанный html-код в шапку страницы. В #logo b меняете ширину и высоту на свои, а для #logo добавляете отступы и поля (margin, padding), если это нужно, чтобы позиционировать блок с лого. Либо, вместо отступов можно задать для этого блока абсолютное позиционирование.

  3. 3
    Александр

    А, понял, ну в прочем да, нормально :)

  4. 4

    а есть ли вообще какая-нибудь возможность проверить включено ли у пользователя отображение картинок?

  5. 5

    Очень бывает обидно, когда рождаешь отличную идею, а потом вдруг узнаешь, что это кто то уже придумал до тебя.

    Метод Pixi

  6. 6

    2 Максим Покровский:
    Ни разу не обидно.. вот когда придумали лучше и проще чем ты (например как определить что отображение картинок не включено) — вот тогда начинаешь думать — чтобы в себе изменить :) — прогресс однако так и возникает :)

    Так что — как определить что отображение картинок отключено никто не знает?

  7. 7

    Steward, ИМХО, определить отключено ли отображение картинок в браузере, сложно технически, поэтому нигде такого нет. Или я ошибаюсь на счет «технически»?

    Максим, идея-то, собственно, и не моя, подсмотрел в каком-то хорошем списке с различными вариантами Image Replacement.

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

  8. 8

    Вот такой кусок кода :) — dot.gif — белая точка 1х1 px :)
    длинновато конечно… надо ещё поработать — зато для прозрачных лого невидно алтернативный текст :))))

    и display: block; — не даёт вылезать длинному тексту за рамки изображения
    #logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 118px;
    height: 110px;
    position: relative;
    display: block;
    }
    #logo b {
    position: absolute;
    top: 0;
    left: 0;
    width: 118px;
    height: 110px;
    background: url(«i/logo.gif») no-repeat;
    }
    #logo i {
    position: absolute;
    top: 0;
    left: 0;
    width: 118px;
    height: 110px;
    background:url(«i/dot.gif») repeat;
    }

    Alternative text here sdfdfgfgdhfdgh

    спасибо за внимание
    конструктивная критика приветствуется :)))

  9. 9

    ой блин :( вот кусок текста

    <a id="logo" href="#">Alternative text here sdfdfgfgdhfdgh<i></i><b></b></a>
    

    вот что значит не читать инструкцию :)))

  10. 10
    Mr.KTO
    @

    У меня почти так же получилось (правда я брал за основу гугл).

    <a class="imgoff" style="width:100px; height:50px;" href="#">
     LogoImgText
     <span class="imgon" style="background-image:url(images/logo.gif);"></span>
    </a>
    

    Насчёт как определить отображение картинок —

  11. 11

    2 Mr.KTO:
    Определение таким образом включены ли картинки — это некарашо :)… точнее я слабо представляю как это можно применить например на статических страницах — надо подумать.
    А на счёт «У меня почти так же получилось» — как я понимаю — у вас таже проблема с прозрачными логотипами получится.

  12. 12
    ATimofeev
    @

    А не смущает, что

    <b></b>

    наверняка будет обруган валидатором? Меня всегда это немного смущало, даже если сделать

    <b>&nbsp;</b>

    .

  13. 13

    ATimofeev, валидатор на такую запись не ругается, однако она не соответствует семантике, поэтому подобное меня тоже немного смущает. Пробел вставлять не обязательно, т.к. суть не изменится.

  14. 14
    @

    А что произойдет если валидатор поругается? Это как-то отразится на сайте?

  15. 15

    Если валидатор ругается, ничего не произойдет и на сайте этот никак не отразится.

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

  16. 16
    @

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

  17. 17
    @

    Добавлю, что в данном виде техника будет часто давать глюки — так как необходимо задать ширину и высоту и для #logo, а так же добавить overflow:hidden,иначе текст будет вылазить из под картинки.

  18. 18

    О, какие люди пожаловали :). akella, спасибо за коммент, не ожидал.

    А по существу — я для #logo здесь написал минимальный код, чтобы показать суть. В каждом конкретном случае он, естественно, будет доработан. Я поступаю по-разному, иногда задаю ширину и высоту и выравниваю текст вертикально и горизонтально, а иногда просто подбираю такой размер шрифта, чтобы текст не выставлялся ис-под картинки. overflow:hidden при этом мне даже ни разу не пригодилось.

  19. 19

    Dimox, пригодится, если попробуешь увеличить размер текста в Firefox’е.

  20. 20
    @

    cursor: pointer; про это не знал, спасибо.