Заменяем текст на картинку
Хочу подробно описать способ замены текста на картинку, способ самый что не наесть правильный, лидер из подобных способов на сайте «Css Tricks».
Заменить слово на картинку это отличный способ совместить и красоту оформления, и поисковую оптимизацию. К примеру, заменить заголовок в самом верху страницы, допустим, «Пластиковые окна» на ваш логотип или этот же текст, только графически.
Это будет радовать глаз Вашего посетителя! :-)
Принцип способа
Мы размещаем заголовок со встроенным в блоком с фоном(нужной нам картинкой) который будет накладываться поверх заголовка.
Приемущества этого способа:
- При отключенной графике с включенным css будет виден заголовок.
- При отключенном css так же будет виден заголовок.
Техническая сторона
<h1 class="technique-eight">
<span></span>Компания "Поющие выдры"
</h1>
h1.technique-eight {
width: 350px; height: 75px;
/* Размеры нужного нам блока */
position: relative;
}
h1.technique-eight span {
background: url("images/header-image.jpg");
/* Наша картинка */
position: absolute;
width: 100%;
height: 100%;
}
Приводить пример данного способа я не счел нужным ибо и так все предельно понятно. Всем моим читателям приятного дня ;-)
Спасиб. Попробую.
А еще лучше добавить
к h1.technique-eight {… overflow:hidden} чтобы при увеличении шрифта снизу ничо не полезло. Ну и оформление задать при отрубленной картинке нормальное :)
В вся «соль» и была в отсутствии overflow:hidden и прочего. А как задать оформление при отрубленной картинке?
Ну я допустим делаю так.
.a-title {position:relative; color:#bf0; font:22px Georgia; text-transform:uppercase; overflow:hidden}
.a-title span {position:absolute; top:0; left:0; width:100%; height:100%}
Подбираю максимально похожий шрифт. Вот один из примеров radioba.by
Или если зайти на new.onliner.by и отрубить графику, то можно увидеть что логотип практически идентичный.
Конечно такая техника не проходит когда у нас все в градиентах :(
Игорь, это действительно тоже очень интересный способ, думаю моих читателей так же заинтересует ваш способ.
Это тот-же способ что ты привел. Просто в твоем способе не учтено то что шрифт может увеличиваться. А следовательно вылазить за фоновую картинку.
Я так понимаю семантичного решения не существует? Без пустых тэгов.
Существует, но они мение удобны. Да и пустые теги не так уж и страшно.
Для IE без экстра-разметки не обойтись (или без expression), а для современных браузеров можно использовать псевдо-класс :before и свойство content. Есть статья по теме –
А alt тогда на что?…
Чего? Чего?
Alt – для изображений являющихся контентом. А замена текста нужня для декоративных целей – для украшения. Разделение контента и оформления, понимаешь.
Все правильно сказали! :-)
вообще-то, для этого предназначен альт. учите хтмл.
Альт не виден при отключенный картинках, поймите это.
Интересный способ, надо бы попробовать!
Тоже думал использовать такой метод, но с точки зрения поисковой оптимизации все ли будет корректно?
Все будет отлично!
А как сделать наоборот?
Сверху картинка, снизу текст?
При клике на картинку, слои меняются местами…
Без пустых тегов нужно поставить css свойство text-indent:-9999px;