Существует множество способов привлечь внимание посетителей к элементам web страницы. К ним относятся: выделение с помощью цвета, размера и начертания шрифтов, добавление рамок и фоновых изображений, взаимное расположение элементов и множество других способов. Но иногда возникают ситуации, в которых необходимо привлечь внимание пользователя к элементу только на небольшой промежуток времени. Например, при возникновении какого-нибудь события. Сегодня я покажу один из возможных вариантов решения этой задачи. Идея очень простая. При возникновении определенного события (например, нажатия на кнопку или ссылку), фон элемента мгновенно изменяет цвет, а затем, плавно возвращается к исходному. Для реализации этого эффекта воспользуемся библиотекой scriptaculous, о которой я уже неоднократно писал. Для создания подсветки элемента используется метод Highlight объекта Effect. Метод принимает два параметра.
Первый – название элемента, к которому будет применен эффект. Второй – массив с параметрами эффекта. Тут можно задать: duration – длительность эффекта (время, в течении которого цвет фона будет возвращаться к первоначальному); startcolor – цвет, который будет установлен в начале эффекта (по-умолчанию используется желтый); endcolor – цвет, в который будет переходить startcolor (по-умолчанию, используется цвет фона, установленный до применения эффекта); restorecolor – цвет фона после завершения эффекта. Теперь посмотрим, как можно использовать этот эффект. Допустим, нам нужно, чтобы при нажатии на ссылку подсвечивался какой-нибудь элемент страницы. Взгляните на разметку страницы: