|
|
|
|
|
|
|
|
|
|
| Главная | Учебник | Статьи | FAQ | Книги | Ссылки |
Приложение 3. На сайте - как в "Винде"
Один из основных законов так называемого "usability" - принципов создания удобных вещей гласит, что интерфейс обьекта, с которым работает человек, должен быть ему знакомым. В применении к web-сайтам принцип сохраняется - зайдя на web-страницу, посетитель не должен гадать и думать, для чего предназначен тот или иной ее эле-мент. Достигнуть этого можно с помощью похожести интерфейса web-страницы на какой-нибудь другой, уже привычный пользовате-лю. Например, на интерфейс операционной системы.
Первый, банальный прием напрашивается сразу - можно поставить в качестве ссылок такие же иконки файлов, как и соответствующие их формату в интерфейсе операционной системы - например, всем зна-комое изображение сжатых струбциной ящиков от стола для архива формата Zip или для документов Word - картинку листа бумаги с эмб-лемой Word'а. Тогда посетитель, зайдя на страницу, сразу увидит знакомые значки и ему будет проще ориентироваться на ней - то, что предназначено для загрузки с сайта, будет видно сразу (рис.17.1).
Однако просто использовать в качестве ссылок иконки архивов - это ведь банально и неинтересно… Да и полной идентичности с ин-терфейсом операционной системы достигнуть нельзя, да и незачем - при работе с браузерами пользователи уже давно привыкли к одинар-ному щелчку для доступа к данным, а не к двойному.
Однако все, работающие с Windows 98 и более старшими версия-ми этой операционной системы, помнят о возможности настроить вид папок так, что при наведении курсора иконка файла будет затеняться, а при нажатии в этот момент левой кнопки мыши файл откроется (рис.17.2). Так, может быть, сделать иконки файлов, предназначенных для загрузки, такими же затемняющимися, как и в Windows? Пред-ставьте себе - навел посетитель курсор мыши на значок, а он стал темным, увел - он стал обычным.
Так почему бы не реализовать такой же эффект на web-странице, содержащей ссылки на архивы или другие файлы, подлежащие за-грузке или открытию?
Но как это сделать?
Можно, разумеется, использовать традиционный метод - исполь-зовать два варианта значка (обычный и затемненный) и с помощью небольшого скрипта организовать их замену друг на друга при наве-дении и уходе курсора мыши. Однако такое устройство страницы приведет к тому, что на страницу придется поместить еще и сценарий для предварительной загрузки картинок (иначе соответствующие ва-рианты значков будут загружаться лишь при наведении мыши, то есть - не сразу). Кроме того, при сохранении web-страницы на локальном диске посетителя иконки, загружаемые в сценариях, не копируются на винчестер, и в итоге во время работы пользователя с сохраненной страницей при наведении курсора мыши иконки будут заменяться на белые "дырки", что, ясно, не есть хорошо.
Однако для достижения требуемого эффекта вполне можно обой-тись и одним изображением, если использовать так называемые "фильтры" - воспринимаемые браузером команды, позволяющие осо-бым образом преобразовать изображение или текст, к которым они применяются.
Если вы пожелаете использовать на web-странице фильтры для достижения эффекта затемнения иконок при наведении на них курсо-ра, то в начало страницы, в раздел "<head>" следует добавить не-большой скрипт, разобранный ниже по строчкам. Синтаксис Javascript во многом похож на синтаксис PHP, так что изучение данного сцена-рия вряд ли станет для вас проблемой.
Начало сценария:
<script language="JavaScript1.2">
Для экономии места используется одна функция, которой сообща-ется имя графического обьекта на web-странице, на котором исполь-зуется затемнение, и требуемое действие - либо применение этого за-темнения, либо его отмена.
function g(c,w)
{
Если нужно "затемнить" картинку:
if (w==0)
...применяем фильтр "light", который окрашивает картинку в опре-деленный цвет...
{
c.style.filter="light";
...и задаем в качестве затемняющего цвета - темно-синий оттенок. Эта команда используется лишь в том случае, когда браузер может работать с фильтрами - именно поэтому она помещена после операто-ра if, проверяющего, существует ли для браузера фильтр light.
if (c.filters.light)
{
c.filters.light.addAmbient(130,130,210,120)
}
Ну, а если нужно, наоборот, вернуть картинке первоначальный вид, то просто отменяем все фильтры.
}
else
{
c.style.filter=0
}
Вот и все:
}
</script>
Вышеописанный сценарий будет "обслуживать" все картинки на странице, для которых вы пожелаете применить эффект "затемнения". Ну, а чтобы это происходило, - в тэг каждой картинки, для которой требуется "затемнение", следует вставить команды "onMouseover="g(this,0)" onMouseout="g(this,1)", на-пример:
<IMG src="z.gif" border=0 height=30 width=30 on-Mouseover="g(this,0)" onMouseout="g(this,1)">
В результате при наведении курсора мыши на картинку она будет затемняться - как на рис.17.3.
К сожалению, данный прием работает только в браузере Microsoft Internet Explorer версии 5.0 и старше. Пользователи же остальных браузеров увидят простую непереливающуюся картинку и ничего больше.
Примеры сценария, а также иконки архивов вы можете взять с адресов http://www.harchikov.ru, http://antorlov.chat.ru, http://karamurza.chat.ru. Просто копируйте картинки и переписывайте сценарий из "Источника HTML", а затем размещайте на своем сайте.
