Замена изображения

У меня есть большой div с заголовком/логотипом сайта в качестве фонового изображения. Есть ли что-то неправильное в том, чтобы поместить тег h2, содержащий заголовок сайта, с помощью z-index, чтобы он отображался, если пользователь по какой-то причине не смог/не получил изображение? Я знаю, что это отличается от стандартной замены изображения [фон на элементе h2]. (РЕДАКТИРОВАТЬ: извините, может быть, я не разъясняю - я использую фоновое изображение div, а не тег IMG)


html css seo image-replacement
person byronyasgur    schedule 22.09.2011    source источник
comment
Используйте <img src="" alt="text" /> jsfiddle.net/sNkMP.   -  person Joonas    schedule 22.09.2011

Ответы (5)


arrow_upward
2
arrow_downward

Если возможно, я бы отказался от div и просто использовал h2 с идентификатором и установил для него фоновое изображение.

Я делаю это всякий раз, когда это возможно, чтобы избежать чрезмерных элементов div, когда я мог бы использовать другие элементы блочного уровня, если у них есть только фон и текст. h* с фоновым изображением по-прежнему является заголовком.

person Chris C    schedule 22.09.2011
comment
но div логотипа / заголовка, который я бы заменил, имеет ширину 960 пикселей - (я хотел, чтобы были доступны заголовок и описание - (я знаю, что не сказал этого ... извините)) ... в любом случае, вы все равно скажете, что я' d лучше иметь h2 такого размера - person byronyasgur; 22.09.2011
comment
я пытаюсь это сделать, но проблема, с которой я столкнулся, заключается в том, что нет способа разместить заголовок для сценариев без изображений. - person byronyasgur; 23.09.2011
comment
ahh - можно установить с помощью text-indent и line-height - person byronyasgur; 23.09.2011
comment
на самом деле - высота строки работает, но текстовый отступ также влияет на изображение - хотя кто-то, вероятно, мог бы обойти это, меня это не беспокоит. Всем спасибо за информацию - person byronyasgur; 23.09.2011

arrow_upward
3
arrow_downward

Вы должны использовать атрибут alt тега img, поэтому, если изображение по какой-то причине не загружено, появится текст.

Именно поэтому существует атрибут alt.

person Kyle    schedule 22.09.2011
comment
ах, тогда просто добавьте какой-нибудь текст внутри did, сделайте его частью дизайна вашего заголовка, это плохая практика поисковой оптимизации, чтобы скрывать такие элементы. - person Kyle; 22.09.2011
comment
вот о чем я думал - они просто делают исключение для обычной замены изображений? - person byronyasgur; 23.09.2011
comment
Обычную замену img я принял, так как это необходимо на случай, если ваш img сломается. Вы всегда можете просто использовать тег h1 с фоновым изображением, и в этом случае вы решите все проблемы, если изображение прервется :-) - person Kyle; 23.09.2011

arrow_upward
2
arrow_downward

Вы можете просто поместить тег img с атрибутом alt. Таким образом, если изображение не загружено, будет отображаться текст.

<img src="" alt="This text will be displayed" />
person simoncereska    schedule 22.09.2011
comment
извините - не знаю, почему люди думают, что я использую IMG - см. обновленный вопрос - person byronyasgur; 22.09.2011
comment
@byronyasgur не о том, что люди думают, что вы используете img. Они говорят, что вы должны .. - person Joonas; 23.09.2011

arrow_upward
1
arrow_downward

Google не нравится то, что вы описываете:

http://www.google.com/support/webmasters/bin/answer.py?answer=66353

Тем не менее, с точки зрения чистого дизайна, реальной проблемы нет, если не считать раздутого кода.

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

person Jason Gennaro    schedule 22.09.2011

arrow_upward
0
arrow_downward

Это нормально. Обратите внимание, что многие считают, что логотип сайта нельзя помещать в тег h*, кроме как на главной странице, когда имеет смысл поместить его в тег h1.

person DA.    schedule 22.09.2011