Связывание гиперссылками изображения с помощью CSS

Вы управляете дизайном и стилями с CSS, не поведением Вашего содержания.

Вы оказываетесь перед необходимостью использовать что-то как <a id="header" href="[your link]">Logo</a> и затем имейте блок CSS, такой как:

a#header {
  background-image: url(...);
  display: block;
  width: ..;
  height: ...;
}

Вы не можете вложить a div внутри <a> и все еще имейте 'действительный' код. <a> встроенный элемент, который не может по закону содержать элемент блока. Единственный не-JavaScript способ сделать ссылку с <a> элемент.

Можно вложить Ваш <a> тег внутри <div> и затем вставленный Ваше изображение :)

Если Вы не хотите это, Вы оказываетесь перед необходимостью использовать JavaScript для создания Вашего <div> активируемый по щелчку:

Document.getElementById("header").onclick = function() {
    window.location='...'; 
}

Связать полученное CSS фоновое изображение:

#header { 
display:block;

margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;    
}    

<a id="header" href="blah.html" class="linkedImage">

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

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

<a href="index.html"><img src="foo" class="whatever" alt="foo alt" /></a>

Править: Беря исходное намерение (обновленный вопрос) во внимание, новый пример кода ниже:

<a href="index.html"><img id="header" alt="foo alt" /></a>

Вы находитесь все еще в мире HTML для ссылок, как описано другим отвечает на этот вопрос.

CSS для презентации только, не доволен. Ссылка довольна и должна быть помещена в HTML сайта с помощью стандарта <a href=""> тег. Можно затем разработать эту ссылку (или добавить изображение к ссылке), использование CSS.

Вы все еще создаете ссылки в HTML с (привязкой) теги точно так же, как нормальный. CSS не имеет ничего, что может указать, является ли что-то ссылкой на где-нибудь или нет.

Отредактируйте мои комментарии, и другие все еще подают заявку. Для разъяснения можно использовать JavaScript, чтобы заставить отделение действовать как ссылка:

<div id="header" onclick="window.location='http://google.com';">My Header</div>

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

Кроме того, можно хотеть добавить a cursor: pointer; строка к Вашему CSS, чтобы дать отделению заголовка корректный курсор мыши для ссылки.

<a href="linkto_title_page.html" class="titleLink"></a>

затем в Вашей CSS

.titleLink {
  background-image: url(imageUrl);
}

Необходимо использовать элемент привязки, перенесенный в контейнер. На Вашей домашней странице Ваш заголовок обычно был бы h1, но затем на страницах содержания это, вероятно, изменится на отделение. У Вас должен также всегда быть текст в элементе привязки для людей без поддержки CSS и/или программ для чтения с экрана. Самый легкий способ скрыться, который является через CSS. Вот оба примеры:

<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>

и CSS:

#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}

В зависимости от остальной части Вашей таблицы стилей Вам, возможно, понадобится к adjus он, чтобы h1 заставил его выглядеть одинаково как отделение, проверьте Сброс CSS для возможных решений этого.

Попробуйте это - использует H1 в качестве места Вашей диаграммы вместо этого. Сохраненный мой зад снова и снова:

<h1 class="technique-six">
    CSS-Tricks
</h1>

h1.technique-six {
    width: 350px;
    padding: 75px 0 0 0;
    height: 0;
    background: url("images/header-image.jpg") no-repeat;
    overflow: hidden;
}

Доступный, и также твердый через браузеры IE6 и>. Вы могли также связать H1.

HTML является единственным способом создать ссылки - он определяет структуру и содержание веб-сайта.

CSS обозначает Каскадные таблицы стилей - он только влияет, как смотрят вещи.

Хотя обычно <a/>; тег является единственным способом создать ссылку, можно сделать a <div/> активируемый по щелчку с JavaScript. Я использовал бы jQuery:

$("div#header").click(function() {window.location=XXXXXX;});