Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)
Путь: Заметки о вёрстке сайтов  >  JavaScript  >  19

Ссылки в ячейках

25 мая 2002 г.

К примеру, ссылка заключена в ячейку таблицы, да ещё цветную. Доверчивый посетитель уже тянется ручками нажать её, но ручка-курсор не появляется! Мы-то с вами знаем, что надо нажать на текст в ячейке. Должен ли знать об этом посетитель?

Автор статьи: Азат Разетдинов

Нажми на кнопку — получишь результат,
И твоя мечта осуществится.
Нажми на кнопку. Но что же ты не рад…
«Технология» о тонкостях юзабилити

Посетителя нужно любить.

В моём городе есть магазин с кратким и звучным названием: «СНХЗ». Да-да, вы не ослышались: «эс-эн-ха-зэ». Каждый раз, когда я мирно еду на базар, меня провожает огромная вывеска на стене девятиэтажки: «СНХЗ». Возвращаюсь домой — она меня встречает. И каждый раз при виде этой вывески я вздрагиваю и шепчу про себя: «Сюда Не Хочу Заходить, Сюда Не Хочу Заходить, Сюда Не Хочу Заходить…»

…Посетителя нужно любить. Если уж он зашёл на сайт, вы должны обеспечить дорогому гостю максимальный комфорт и уют. Угодите — он ещё и на ссылку какую-нибудь нажмёт. Тут его и ожидают всякие неприятности.

К примеру, ссылка заключена в ячейку таблицы, да ещё цветную. Доверчивый посетитель уже тянется ручками нажать её, но ручка-курсор не появляется! Мы-то с вами знаем, что надо нажать на текст в ячейке. Должен ли знать об этом посетитель?

Явное нарушение принципа юзабилити: поведение ячейки, напоминающей собой кнопку, не совпадает с ожиданиями пользователя.

Что делать? Ответ очевиден: ячейка должна стать нажимаемой.

Рассмотрим план действий:

  1. Пользователь наводит курсор на ячейку: а) подчёркиваем ссылку; б) в статусе выводим её адрес; в) показываем «пальчик».
  2. Пользователь уводит курсор: всё то же самое наоборот.
  3. Пользователь «нажимает» ячейку: имитируем клик по ссылке.

В ходе непродолжительной дискуссии была выявлена самая экономичная реализация данной идеи: обрабатываются события onMouseOver, onMouseOut и onClick тэга body.

<HTML>
<HEAD>

<STYLE type=text/css>
<!--
TR.menu TD A{
text-decoration:none
}
-->
</STYLE>

<SCRIPT language=JavaScript><!--
function Hover(isover) {
  var it = event.srcElement;
  if(it.parentElement.className == 'menu' && it.tagName == 'TD'
  && it.children.length && it.children(0).href) {
    it.style.cursor = isover ? 'hand' : 'default';
    window.status = isover ? it.children(0).href : '';
    it.children(0).style.textDecorationUnderline = isover;
    if (event.type == 'click') location.href = it.children(0).href;
    }
  }
// --></SCRIPT>
</HEAD>

<BODY onMouseOver=Hover(true) onMouseOut=Hover(false) onClick=Hover(true)>

<TABLE cellpadding=10 border=0>
<TR class=menu>
<TD bgcolor=red><A href=/news/>Новости</A></TD>
<TD bgcolor=pink><A href=/goods/>Товары</A></TD>
<TD bgcolor=yellow><A href=/about/>О компании</A></TD>
</TR>
</TABLE>

</BODY>
</HTML>

К сожалению, таким образом мы осчастливим лишь пользователей IE5+. Opera атрибут cursor не понимает совсем, N6 — частично. Указатель hand ему, очевидно, неизвестен…

Автор статьи: Азат Разетдинов

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления
LiveInternet