Разделенные ссылки

02.07.2019 | Категория: Web-мастеру и не только | Автор: ManHunter

Разделенные ссылки - очень интересный визуальный эффект для оформления вашего сайта. Суть разделенных ссылок заключается в том, что одна ссылка имеет одновременно несколько активных областей, которые могут находиться вообще в разных местах страницы. Например:

Разделенные ссылки

При наведении курсора на название альбома также подсвечивается его обложка в левом блоке, а при наведении на любую из обложек будет подсвечено название соответствующего альбома. Никаких скриптов для этого не требуется, все реализуется средствами CSS.

Как это делается? Фактически изображение и текст ссылки находятся внутри одного тега, только изображение за счет абсолютного позиционирования переносится на нужную часть страницы. При этом ссылка может иметь внутри себя несколько элементов, которые также могут быть визуально вынесены за ее границы.

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

Code: Убрать нумерацию

#overall {
width: 200px;
position: relative;
padding: 5px 5px 5px 420px;
}
#overall a {
text-decoration: none;
color: #909090;
width: 100%;
display: block;
padding: 5px;
font-size: 16px;
}
#overall div {
color: #101010;
padding-bottom: 5px;
font-size: 10px;
}
#overall a img {
position: absolute;
}
#overall a:hover {
background: #00FFFF;
}
#overall a:hover img {
box-shadow: 0 0 10px rgba(0,255,0);
}

Верстка HTML достаточно простая, все абсолютно валидное, кроссбраузерное и семантически выдержанное. Для позиционирования картинок я использую inline-стили. Хоть это и считается дурным тоном, но выносить их в общие правила CSS не вижу необходимости, так как обычно такие блоки генерируются динамически из шаблонов.

Code (HTML) : Убрать нумерацию

<div id="overall">
<div>
<a href="#">
Мышеловка
<img src="grob_03.jpg" style="top:5px; left: 210px;">
</a>
1987 год, ГрОб Records
</div>
<div>
<a href="#">
Солнцеворот
<img src="grob_02.jpg" style="top:210px; left: 5px;">
</a>
1997 год, ГрОб Records
</div>
<div>
<a href="#">
Все идет по плану
<img src="grob_01.jpg" style="top:5px; left: 5px;">
</a>
1988 год, ГрОб Records
</div>
<div>
<a href="#">
Оптимизм
<img src="grob_04.jpg" style="top:210px; left: 210px;">
</a>
1985 год, ГрОб-Рекордз
</div>
</div>

Готовый пример страницы, сверстанной с использования разделенных ссылок, вы можете посмотреть здесь.

Просмотров: 1376 | Комментариев: 1

Метки: CSS, HTML, оформление сайта

Внимание! Статья опубликована больше года назад, информация могла устареть!

Добавить комментарий

Заполните форму для добавления комментария

Если программист в девять утра уже на работе, значит он там же и ночевал

Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина

Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.

Метки статей

Свернуть

Вам помог этот сайт?

Поблагодарили 34,351 раз

День дочери

День ДНК

Всемирный день пингвинов

Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите

Ctrl

Enter

Буду очень благодарен, если размеcтите мою кнопочку:

<a href="https://www.manhunter.ru" target="_blank"><img src="https://www.manhunter.ru/images/button.gif" alt="Личный блог ManHunter'а" title="Личный блог ManHunter'а" width="88" height="31" /></a>

$Яндекс тИЦ: {YANDEX_TIC}$

Яндекс ИКС: 380

Сейчас я слушаю

---

- автообновление

Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0053 сек.) / Память: 4.5 Mb

	2024 - АПРЕЛЬ
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Разделенные ссылки

Комментарии

Добавить комментарий