| |
Копилка секретов веб-мастера
Антон Орлов (Москва)
Иконки с переливами
Один из основных законов так называемого "usability" - принципов создания удобных вещей, в данном случае веб-сайтов, - гласит, что интерфейс объекта, с которым работает пользователь, должен быть ему знакомым. Например, зайдя на веб-страницу, посетитель не должен гадать, для чего предназначен тот или иной ее элемент. Достигают этой цели за счет похожести интерфейса веб-страницы на какой-нибудь другой, привычный пользователю, например, на интерфейс операционной системы.
Первое, что приходит в голову, - сделать ссылками на загружаемые файлы такие же иконки, как и соответствующие формату этих файлов в интерфейсе операционной системы. Если, к примеру, на сайте размещен архив формата Zip, то ссылку на него удобно оформить в виде знакомого всем изображения сжатых струбциной ящиков. Тогда посетитель увидит знакомые значки и ему будет проще ориентироваться на сайте - то, что предназначено для загрузки, видно сразу.
Можно пойти еще дальше. Как известно, в Windows вид папок можно настроить так, что при наведении курсора на иконку файла она будет затеняться, а при щелчке в этот момент левой кнопки мыши файл откроется. А что, если перенести эту особенность интерфейса ОС на веб-страницу? Представьте себе: навел посетитель курсор на значок - он стал темным, отвел - снова обычный.
Как реализовать такой прием? Можно, разумеется, пойти традиционным путем - использовать два варианта значка (обычный и затемненный) и с помощью небольшого скрипта организовать замену одного на другой при наведении и уходе курсора. Однако при таком подходе на страницу придется поместить еще и сценарий для предварительной загрузки картинок (иначе варианты значков будут загружаться лишь при наведении мыши, то есть не сразу). Кроме того, при сохранении веб-страницы на локальном диске посетителя иконки, загружаемые в сценариях, не копируются на винчестер, и при работе пользователя с сохраненной страницей иконки будут заменяться на белые "дырки", что, ясное дело, не есть хорошо.
Однако для достижения нужного эффекта вполне можно обойтись и одним изображением, если использовать так называемые фильтры. Подробное описание, что это такое, вы можете найти в книгах по веб-дизайну, здесь же скажу лишь, что для реализации приема в начало страницы, в раздел , следует добавить небольшой скрипт:
<script language="JavaScript1.2">
Для экономии места используется одна функция, которой в первой переменной сообщается имя графического объекта на веб-странице, на котором используется затемнение, а во второй - требуемое действие: либо применение этого затемнения (кодируется числом 1), либо его отмена (соответственно, число 0).
|
