Альтернативный текст для графики при использовании 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)
Странный результат выходит однако, :) как позиционировать этот Лого-блок? я что-то не могу додуматься, видать знаний моих в верстке не хватает :(
Не понимаю, в чем у вас затруднение. Вставляете вышеуказанный html-код в шапку страницы. В
#logo bменяете ширину и высоту на свои, а для#logoдобавляете отступы и поля (margin, padding), если это нужно, чтобы позиционировать блок с лого. Либо, вместо отступов можно задать для этого блока абсолютное позиционирование.А, понял, ну в прочем да, нормально :)
а есть ли вообще какая-нибудь возможность проверить включено ли у пользователя отображение картинок?
Очень бывает обидно, когда рождаешь отличную идею, а потом вдруг узнаешь, что это кто-то уже придумал до тебя.
Метод Pixi
2 Максим Покровский:
Ни разу не обидно. вот когда придумали лучше и проще чем ты (например как определить что отображение картинок не включено) — вот тогда начинаешь думать — чтобы в себе изменить :) — прогресс однако так и возникает :)
Так что — как определить что отображение картинок отключено никто не знает?
Steward, ИМХО, определить отключено ли отображение картинок в браузере, сложно технически, поэтому нигде такого нет. Или я ошибаюсь на счет «технически»?
Максим, идея-то, собственно, и не моя, подсмотрел в каком-то хорошем списке с различными вариантами Image Replacement.
А вообще, ситуация, когда придумываешь идею, которая уже была придумана до тебя, я думаю, в веб-разработке встречается часто (так как уже все давно придумано за нас :). Мне в таком случае, конечно же, было бы немного обидно.
Вот такой кусок кода :) — 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
спасибо за внимание
конструктивная критика приветствуется :)))
ой блин :(вот кусок текста
вот что значит не читать инструкцию :)))
У меня почти так же получилось (правда я брал за основу гугл).
Насчёт как определить отображение картинок —
2 Mr. KTO:
Определение таким образом включены ли картинки — это некарашо :)… точнее я слабо представляю как это можно применить например на статических страницах — надо подумать.
А на счёт «У меня почти так же получилось» — как я понимаю — у вас таже проблема с прозрачными логотипами получится.
А не смущает, что
наверняка будет обруган валидатором? Меня всегда это немного смущало, даже если сделать
.
ATimofeev, валидатор на такую запись не ругается, однако она не соответствует семантике, поэтому подобное меня тоже немного смущает. Пробел вставлять не обязательно, т.к. суть не изменится.
А что произойдет если валидатор поругается? Это как-то отразится на сайте?
Если валидатор ругается, ничего не произойдет и на сайте этот никак не отразится.
Прохождение валидации означает, что сайт соответствует современным стандартам и это говорит о профессионализме веб-разработчика. Хотя в действительности часто сайты не валидны из-за наличиния различных ява-скриптов, флеша (возможно чего-то еще), без которых, бывает, никак не обойтись.
Понял. Думал уже, что как-то на продвижении сайта может сказаться несоответствие стандартам.
Добавлю, что в данном виде техника будет часто давать глюки — так как необходимо задать ширину и высоту и для #logo, а так же добавить overflow: hidden, иначе текст будет вылазить из-под картинки.
О, какие люди пожаловали :). akella, спасибо за коммент, не ожидал.
А по существу — я для
#logoздесь написал минимальный код, чтобы показать суть. В каждом конкретном случае он, естественно, будет доработан. Я поступаю по-разному, иногда задаю ширину и высоту и выравниваю текст вертикально и горизонтально, а иногда просто подбираю такой размер шрифта, чтобы текст не выставлялся ис-под картинки. overflow: hidden при этом мне даже ни разу не пригодилось.Dimox, пригодится, если попробуешь увеличить размер текста в Firefox’е.
cursor: pointer; про это не знал, спасибо.