Большие зоны с кликами на веб-странице

108
15

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


<div class="summary">
<a href="#">
<h4>Small Heading</h4>
<p>Small amount of text</p>
</a>
</div>

Я бы тогда стиль href выглядел как хорошая коробка, изменил H4 и P on: hover и т.д. Но, если положить href, браузеры будут сердиться.


Может ли кто-нибудь предложить способ достижения такого же эффекта, не прибегая к Javascript? Возможно ли это?


Большое спасибо!

спросил(а) 2009-08-04T16:43:00+04:00 10 лет, 6 месяцев назад
1
Решение
59

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

Все, что вам нужно сделать, это изменить свой doctype, а затем похвастаться друзьями, насколько вы современны: -)

ответил(а) 2009-08-04T16:50:00+04:00 10 лет, 6 месяцев назад
68

Чистое решение CSS должно было бы сделать это:


<a href="#">
<span class="header4">Small Heading</span>
<span class="paragraph">Small amount of text</span>
</a>

Затем измените элемент A на элемент блока и нарисуйте промежутки в соответствии с тем, как вы хотите, чтобы заголовок и абзац выглядели следующим образом:

<style>
a {
display: block;
}

span.header4 {
display: block;
font-size: 24px;
font-weight: bold;
margin: 0 0 10px 0;
}

span.paragraph {
display: block;
margin: 0 0 10px 0;
}
</style>


HTML/CSS purist не понравится, хотя!

ответил(а) 2009-08-04T16:59:00+04:00 10 лет, 6 месяцев назад
35

Это сделает то, что вы хотите, но вы потеряете возможность выбирать (копировать + вставлять) текст, находящийся под наложением ссылки. У вас также не будет контроля над псевдо-классом hover в IE6 (поскольку IE6 и ниже его не поддерживают).


Здесь HTML:


<div class="summary">
<h4>Some Text</h4>
<p>A short description</p>
<a href="#" class="overlay">Anchor Text</a>
</div>

И вот CSS:


<style>
div.summary {
position: relative;
width: 200px;
height: 100px;
z-index: 10;
}

div.summary h4 {
position: relative;
font-size: 18px;
font-weight: bold;
}

div.summary p {
position: relative;
}

a.overlay {
display: block;
position: absolute;
text-indent: -9999px;
width: 200px;
height: 100px;
z-index: 30;
top: 0;
left: 0;
}
</style>


В качестве примечания убедитесь, что вы объявляете позицию в элементе контейнера класса .overlay, чтобы работать с абсолютным позиционированием. Вам также необходимо убедиться, что вы объявляете позицию в родительском элементе каждого позиционированного элемента z-index.


Сообщите мне, есть ли у вас какие-либо проблемы.

ответил(а) 2009-08-06T17:38:00+04:00 10 лет, 6 месяцев назад
37

Возможно, у меня вообще не хватает цели.


Когда я скопировал ваш пример кода в текстовый редактор и открыл его в браузере (FF 3.5 на Leopard), он работал нормально. Я даже добавил немного стиля, чтобы быть уверенным.


Так что это определенный браузер, который он ломает? Или он не проверяет?


Вы пытались разместить тег привязки на внешней стороне div?

ответил(а) 2009-08-04T17:25:00+04:00 10 лет, 6 месяцев назад
37

Попробуйте изменить стиль элемента a на display:block.

ответил(а) 2009-08-04T16:57:00+04:00 10 лет, 6 месяцев назад
35

Почему бы не использовать javascript?


<div class="summary" onclick="window.location.href='www.google.com';>
<h4>Small Heading</h4>
<p>Small amount of text</p>
</div>

Без javascript вы не получите доступ ко всей области div. Только текст.

ответил(а) 2009-08-04T16:52:00+04:00 10 лет, 6 месяцев назад
-4

Развернувшись на том, что сказал Андрейс:


    a.clickDiv {
display:block;

}

<a href="somelink.html" class="clickDiv">

content

</a>

ответил(а) 2009-08-04T16:59:00+04:00 10 лет, 6 месяцев назад
-5

Короткий ответ: "Не с правильным, стандартным, семантически правильным HTML". (HTML 5 еще не является стандартным и требует взлома, чтобы заставить его работать в разных браузерах)


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


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


Использование JavaScript - хорошее решение здесь (но, естественно, только тем способом, который все еще функционирует, если JS недоступен).


Я буду использовать jQuery для этого примера (для этого достаточно DOM, чтобы оправдать его).


<div class="summary">
<h4><a href='#'>Small Heading</a></h4>
<p>Small amount of text</p>
</div>

jQuery('div.summary').click(function () {
jQuery('a', this).click();
});


Я не тестировал это, но если click() не делает то, что я ожидаю, вы можете его заменить:


jQuery('div.summary').click(function () {
document.location = jQuery('a', this).attr('href');
});

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


Вы можете добавлять эффекты наведения с помощью:


jQuery('div.summary').addClass('hoverable');

и


div.hoverable:hover { background-color: green; }

(Таким образом, эффект зависания не будет срабатывать, если JS недоступен, кроме CSS)

ответил(а) 2009-08-04T17:18:00+04:00 10 лет, 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема