Текст CSS заменить изображением, нужна гиперссылка

Я использую технику text-indent, чтобы заменить свой тег <h1/> изображением моего веб-сайта следующим образом:

<h1 title="Homepage">My logo</h1>

CSS:

#header h1 {
    float: left;
    background: transparent url('../images/logo.png');
    width: 214px;
    height: 64px;
    text-indent: -9999px;
}

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

<h1 title="Homepage"><a href="#">My logo</a></h1>

Но так как он с отступом, ссылка тоже. Я хотел знать, есть ли у кого-нибудь какие-либо предложения о том, как это сделать и при этом оставаться действительным XHTML.

РЕДАКТИРОВАНИЕ Я бы предпочел сделать это так, чтобы это было доступно пользователям программ чтения с экрана. Судя по тому, что я прочитал, выполнение display:none не будет работать с некоторыми программами чтения.


css accessibility xhtml
person roflwaffle    schedule 29.01.2009    source источник

Ответы (4)


arrow_upward
7
arrow_downward

Есть много способов сделать это, это способ, который я предпочитаю, он хорошо работает и его легко реализовать.

<div id="header">
    <h1><a href="/" title="Homepage">Homepage</a></h1>
</div>

Затем я делаю этот css, это также известно как метод «замена изображения Leafy/Langridge».

#header h1 a {
    display: block;
    padding: 22px 0 0 0;
    overflow: hidden;
    background-image: url(../images/sidebar/heading.png);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:22px;
}

Единственное, что вам нужно будет отредактировать, это height и padding-top. В этом примере это 22px, это должно быть равно высоте вашего изображения.

person espenhogbakk    schedule 29.01.2009

arrow_upward
2
arrow_downward

Почему вы возитесь с отрицательными отступами - просто используйте атрибут alt тега img?

<h1 title="Homepage><a href="#"><img src="images/logo.png" alt="My logo"/></a></h1>
person Peter Boughton    schedule 29.01.2009
comment
вы пропустили закрывающую угловую скобку в теге ‹/a› - person bandi; 29.01.2009
comment
Спасибо, не знаю, как я пропустил это сам. :( - person Peter Boughton; 29.01.2009

arrow_upward
2
arrow_downward

@Partrik Hägne: Вы не должны использовать display:none, потому что некоторые программы чтения с экрана проигнорируют это...

Вы можете увидеть список девяти методов замены изображений CSS на странице http://css-tricks.com, где описаны минусы и плюсы каждого решения.

person Davy Landman    schedule 29.01.2009
comment
Если скринридеры проигнорируют это, это идеально, тогда текстовое содержимое будет прочитано обратно, это как раз то, что мы хотим, не можем увидеть, что в этом плохого. Кажется, что в списке есть еще лучшие методы. - person Patrik Hägne; 29.01.2009
comment
@Patrik: программы чтения с экрана игнорируют его, как и в случае, не читают текст .. (Поскольку display:none также используется для скрытия html-частей по законным причинам) - person Davy Landman; 29.01.2009
comment
Хорошо, тогда я вас неправильно понял. Как я уже сказал, сейчас в любом случае есть методы получше, чем у меня! Я немного старая школа, очевидно. ;-) - person Patrik Hägne; 30.01.2009

arrow_upward
0
arrow_downward

Что вы можете сделать, так это удалить отступ. И вместо этого используйте диапазон, чтобы скрыть:

<h1 title="Homepage"><a href="#"><span>My logo</span></a></h1>

#header h1 span
{
  display: none;
}

Возможно, вам придется установить ширину и высоту A-тега, поскольку с помощью этого трюка ничего не заполняется.

person Patrik Hägne    schedule 29.01.2009
comment
Да, я действительно не вижу причин для этого отрицательного голосования. - person Patrik Hägne; 29.01.2009
comment
Я проголосовал за него, потому что это не лучший способ, для начала он использует дополнительную разметку, тег span не имеет к этому никакого отношения. И, как сказал Дэви Лэндман, display: none; имеет некоторые недостатки. - person espenhogbakk; 29.01.2009
comment
Я уверен, что вам не следует голосовать против, потому что это не окончательное решение, я думаю, вы совершенно не поняли, почему голосовали против. Только не голосуй. - person Patrik Hägne; 29.01.2009
comment
Прежде всего, будьте честны. Если вы видите дезинформацию, проголосуйте против. Вставьте комментарии, указывающие, что конкретно не так. Еще лучше — редактируйте и улучшайте информацию! Дайте более сильные, быстрые, превосходные ответы! display:none, может не работать в программах чтения с экрана, поэтому я интерпретировал это как неправильно... - person espenhogbakk; 29.01.2009
comment
Ни один из императивов в этом предложении вы не выполнили. Классифицировать мой ответ как неправильный — это натяжка, сказать, что это дезинформация, — еще большая натяжка. Я согласен, это может быть не окончательное решение, но это определенно приемлемое решение. - person Patrik Hägne; 30.01.2009