Распределённые ссылки

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

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

Как это делается?

Ничего особенного, просто разместите элементы, которые вы хотите использовать в этом эффекте, в одной ссылке. Например так:

<a href="#toby" id="toby"> <span class="name">Toby Yong</span><br /> Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the author of How to Lose Friends and Alienate People. <img src="image_1.jpg" alt="Toby Pic" class="photo" /> </a>

Теперь осталось применить некоторые CSS-приёмы, чтобы сделать то, что мы хотим сделать. Конечно же необходимо установить позиции для текста, но гораздо более важная цель - картинки. Для них необходимо использовать абсолютное позиционирование.

Пишем следующий CSS:

.people { position: relative; } a { text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px; } a img { border: 1px solid #ccc; display: block; position: absolute; } a:hover { background: #ffefcd; } a .name { font: 18px Georgia, Serif; } a:hover .name { color: #900; font-weight: bold; } a:hover img { border: 5px solid #222; margin: -4px; } #toby img { top: 0; left: 0; } #tom img { top: 0; left: 134px; } #gail img { top: 134px; left: 0; } #padma img { top: 134px; left: 134px; }

Пример

Опубликовано: 22.11.2009 Просмотров 12711 Ссылка на оригинал Tweet it!
4 comments  

~AquaZ~

2009.12.22 22:20

 Так Toby Yong или Toby Young?
Сайт просто обалденный =)!
 

basilkot

2009.12.22 22:30

  • Видимо Young, но картинку переделывать не буду, поскольку взята с оригинальной статьи :)

сергей

2010.07.12 22:21

 Сайт, обалденно красивый. Я давно ищу, как сделать распределенные ссылки. И вот нашел у Вас. Спасибо. Пусть висит как можно дольше
 

Kvisaz.ru

2010.08.04 07:07

 А я немного по другому использовал - картинки на одном и том же месте, только изначально они невидимые, а появляются, когда наводишь мышку на ссылку. Короче говоря, этакое контекстное меню. Дошёл сам, когда прочёл статью про позициинирование на этом же сайте :) Родительский элемент с position:relative - рулит!
 

Илья

2010.12.21 13:59

 Метод не кроссбраузерный.

6 и 7 ослики неверно отобразили свойство margin и поэтому надо искать другой способ или использовать какие либо хаки
 

basilkot

2010.12.21 14:10

  • на самом деле эта статья - пример, который вы можете использовать на своём сайте. если вам понадобится такая возможность и будет необходимость расширять использование на IE6-7, то, как я понимаю, проблем с хаками не будет :)

Оставить после себя комментарий

user

2016.10.15

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!