Затемняющиеся иконки

Один из основных законов так называемого "usability" - принципов создания удобных вещей, в данном случае web-сайтов, гласит, что интерфейс обьекта, с которым работает пользователь, должен быть ему знакомым. То есть, в данном случае, - зайдя на web-страницу, посетитель не должен гадать и думать, для чего предназначен тот или иной ее элемент. Достигнуть этого можно с помощью похожести интерфейса web-страницы на какой-нибудь другой, привычный пользователю. Например, интерфейс операционной системы.

Наверняка все, работающие с Windows 98 и более старшими версиями этой операционной системы, помнят о возможности настроить вид папок так, что при наведении курсора иконка файла будет затеняться, а при нажатии в этот момент левой кнопки мыши файл откроется. Так почему бы не реализовать такой же эффект на web-странице, содержащей файловый архив? Скажем, поставить в качестве ссылок такие же иконки этих файлов, как и соответствующие их формату в интерфейсе операционной системы (например, для архива формата Zip - изображение сжатых струбциной ящиков от стола,). Тогда посетитель, зайдя на страницу, сразу увидит знакомые значки и ему будет проще ориентироваться на ней - то, что предназначено для загрузки с сайта, будет видно сразу.

Однако просто использовать в качестве ссылок иконки архивов - это весьма банально и неинтересно. А что, если сделать их такими же затемняющимися, как и в Windows? Представьте себе - навел посетитель курсор мыши на значок, а он стал темным, увел - он стал обычным. Но как это реализовать?

Можно, разумеется, использовать традиционный метод - использовать два варианта значка (обычный и затемненный) и с помощью небольшого скрипта организовать их замену друг на друга при наведении и уходе курсора мыши. Однако такое устройство страницы приведет к тому, что на страницу придется поместить еще и сценарий для предварительной загрузки картинок (иначе соответствующие варианты значков будут загружаться лишь при наведении мыши, то есть - не сразу).
Кроме того, при сохранении web- страницы на локальном диске посетителя иконки, загружаемые в сценариях, не копируются на винчестер, и в итоге во время работы пользователя с сохраненной страницей при наведении курсора мыши иконки будут заменяться на белые "дырки", что, ясно, не есть хорошо.

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

В начало страницы, в раздел "<head>" следует добавить скрипт:

<script language="JavaScript1.2">

Далее следует стандартный синтаксис сценария на Javascript. Для экономии места используется одна функция, которой сообщается имя графического обьекта на web-странице, на котором используется затемнение, и требуемое действие - либо применение этого затемнения, либо его отмена.

function g(c,w)

{

if (w==0)

Если нужно "затемнить" картинку:

{

c.style.filter="light";

...применяем фильтр "light", который окрашивает картинку в определенный цвет...

if (c.filters.light)

{

c.filters.light.addAmbient(130,130,210,120)

}

...и задаем в качестве затемняющего цвета - темно-синий оттенок. Эта команда используется лишь в том случае, когда браузер может работать с фильтрами - именно поэтому она помещена после оператора if, проверяющего, существует ли для браузера фильтр light.

}

else

c.style.filter=0

Ну, а если нужно, наоборот, вернуть картинке первоначальный вид, то просто отменяем все фильтры.

}

</script>

В тэг каждой картинки, для которой требуется реализация эффекта "затемнения", следует вставить команды "onMouseover="g(this,0)" onMouseout="g(this,1)":

<IMG src="z.gif" border=0 height=30 width=30 onMouseover="g(this,0)" onMouseout="g(this,1)">

В результате при наведении курсора мыши на картинку она будет затемняться - как на рисунке выше.

К сожалению, данный прием работает только в браузере Microsoft Internet Explorer версии 5.0 и старше. Пользователи же остальных браузеров увидят простую непереливающуюся картинку и ничего больше.

Примеры сценария и иконки архивов вы можете взять с адресов http://antorlov.chat.ru, http://karamurza.chat.ru, http://skywars.chat.ru, http://ambarsum.chat.ru.

Содержание раздела