x
 
Игорь
23 августа 2012

Как правильно делать синхронное подсвечивание одинаковых ссылок, например у картинки и текста? Обязательны ли скрипты?



Скрипты оставим на потом. Чтобы это сработало на чистом ЦСС, сделаем из двух ссылок:

<div class="item">
  <div class="pic">
    <a href="url">
      <img src="pic.jpg" width="150" height="90" />
    </a>
  </div>
  <div class="text">
    Вот так <a href="url">ссылка</a>
  </div>
</div>

одну:

<div class="item">
  Вот так
  <a href="url">
    <img src="pic.jpg" width="150" height="90" />
    ссылка
  </a>
</div>

Вытащим картинку из текста абсолютным позиционированием, верхним падингом освободим место под картинку:

.item {
  position: relative;
  padding-top: 111px;
  /* Высота картинки плюс отступ до текста,
     при разной высоте картинок, можно прописывать
     инлайн-правилами прямо в ХТМЛ. */
}
.item img {
  position: absolute;
  top: 0;
  left: 0;
}

Никаких скриптов:

Конечно не всегда получается обойтись объединением ссылок и ЦСС — сложный макет, непредсказуемые размеры картинки, табличная вёрстка, ограниченное время… На всякий пожарный у меня всегда под рукой функция doubleHover.


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Дмитрий Кравчик
23 августа 2012

Субъективно, в данном случае скрипты — намного меньшее зло, чем трюки с позиционированием картинки.
Потому как отпавший по каким-то причинам синхронный ховер — лишь мелкая неприятность. А вот поехавший макет (например, в админке залили нестандартную картинку) — это уже серьезно.

Иван Титов
24 августа 2012

Дмитрий, в коде Артёма явно указаны размеры картинки. В данном случае это правильная практика: надо защищать макет от разрушения на уровне ХТМЛ и ЦСС. (Пусть лучше картинка сплющится, но при этом ничего не поедет.)

Александр Шабуневич
25 августа 2012

Почему бы не использовать селекторы CSS3 по сиблингам? .item a:hover + .text a
Современные браузеры поддерживают, а для старых это поведение некритично.

Тут пример: http://jsfiddle.net/wSCQu/

Артём Сапегин
31 августа 2012

Часто можно сделать ещё проще — сделать ссылкой весь блок, но подсвечивать только часть текста.

Владимир Старков
6 сентября 2012

Дмитрий Кравчик, «нестандартная картинка» — слабый аргумент, так как всегда можно задать max-width:100% или max-height:100% и ограничить в размерах контейнер картинки

Сергей Морозов
18 сентября 2012

Подход очень порадовал. Ничто никуда не поедет, если сжимать большие картинки сервером, или установить максимальную и минимальную высоту/ширину. Нагрузки от скриптов нет, всё чистенько.

Иван Орехов
28 сентября 2012

А почему бы просто не завернуть всё — и текст, и картинку в ссылку?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5




Недавно всплыло

1 Поделитесь соображениями, как работать, путешествуя 8 Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 Защититься от случайного нажатия «Сдаться» 1