—»     —»   Гиперссылки с дистанционным управлением (или множественные ссылки в одной)
  Раздел: Tips and Tricks, CSS/Style Sheets   Комментариев: 2  

Гиперссылки с дистанционным управлением (или множественные ссылки в одной)



Гиперссылки с дистанционным управлением (или множественные ссылки в одной)

Речь идёт о скромной хитрости разработки, о которой раньше все могли лишь мечтать. Я даже не совсем уверен, как правильно называть то, о чем вы прочтёте в ближайшее время, но мне кажется, что гиперссылки с дистанционным управлением – это наиболее подходящий термин.

Предположим, что у вас есть бегущая строка, содержащая в себе текст типа «узнайте больше обо мне и будьте на связи». Здесь у нас есть два действия: узнать больше и установить контакт. Давайте также предположим, что информация о вас и форма контакта находятся на одной странице и представляют собой одну страницу. Контакт подразумевает лишь адрес электронной почты, указанный на той же странице. Речь идёт о том, чтобы сделать так, что две разные ссылки ведут на одну и ту же страницу, но лишь немного отличаются.

Смотреть Demo

На практике, наведение курсора мыши на одну ссылку активирует несколько псевдо-ссылок, находящихся внутри нее.

Это делается для того, чтобы скрыть все признаки ссылки (эффект при наведении, смена курсора и так далее) у «a» и применить все эти параметры к элементам (span) внутри неё. Когда вы наводите курсор на а, изменяются какие-то определенные элементы, принадлежащие ссылке, но при нажатии по ссылке, все элементы приводятся в действие.

<p>Read more <a href="#" class="multi-links"><span>about me</span> and <span>contact me</span></a>.</p>

<p>Why not <a href="#" class="multi-links"><span>search</span> and <span>read</span> my archives</a>?</p>

a,.multi-links span{
  font-weight:bold;
  color:#c00;
  text-decoration:none;
  cursor:pointer;
}
.multi-links,.multi-links:hover,.multi-links:active,.multi-links:focus{
  position:static;
  text-decoration:none;
  font-weight:normal;
  color:#333;
  outline:none;
  cursor:text;
}
a:hover,a:active,a:focus,.multi-links:hover span{
  text-decoration:underline;
}
a:active,a:focus,.multi-links:active span,.multi-links:focus span{
  position:relative;
  top:1px;
  text-decoration:underline;
}
.multi-links:active span,.multi-links:focus span{
  outline:1px dotted #c00;
}

Некоторые формальности

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

Размышления

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

Это хорошо подойдет для сайтов-портфолио или сайтов-визиток.

В любом случае, здесь нет ничего сверхъестественного, но эффект довольно интересный.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: ссылки
Опубликовал Mysterious Master   Прочитано (раз): 5032   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 16 февраля 2011 @ 17:20
Написал: guest — группа: Читатели  
На сайте с: 7.02.2011   |   Публикаций: 0   |   Комментариев: 52
ICQ: --- не указано ---
А вы случайно не подскажите, как по нажатию на одну ссылку переходить сразу на несколько сайтов?, то есть нажимаем одну ссылку и открывается, ну скажем 7 сайтов.


--------------------
А знаете ли Вы, что что 90% людей не замечают в этом тексте повторение слова «что» в самом начале.
Комментарий #2: 22 ноября 2012 @ 15:22
Написал: dimkad — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
спасибо за статью, очень интересно, не видел раньше материалов об этом
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930