НА САЙТІ - ЯК В "ВІНДІ"

This version of the page http://phpua.net/P3/Index0.htm (0.0.0.0) stored by archive.org.ua. It represents a snapshot of the page as of 2011-05-29. The original page over time could change.

Orig:http://phpua.net/pics/php_2.jpg

ДОДАТОК 3. НА САЙТІ - ЯК В "ВІНДЕ"

Один з основних законів так званого "usability", тобто принципів створення зручних речей свідчить, що інтерфейс об'єкту, з яким працює людина, має бути йому знайомим. У застосуванні до web-сайтам принцип зберігається - зайшовши на web-страницу, відвідувач не повинен ворожити і думати, для чого призначений той або інший її елемент. Досягти цього можна за допомогою схожості інтерфейсу web-страницы на якій-небудь іншій, вже звичний користувачеві. Наприклад, на інтерфейс операційної системи.
Перший, банальний прийом напрошується відразу. Можна поставити як заслання такі ж ікони файлів, як і відповідні їх формату в інтерфейсі операційної системи, наприклад, всім знайоме зображення стислих струбциною ящиків від столу для архіву формату Zip або картинка аркуша паперу з емблемою Word'a для документів Word. Тоді відвідувач, зайшовши на сторінку, відразу побачить знайомі значки і йому простіше орієнтуватиметься на ній, оскільки те, що призначене для завантаження з сайту, буде видно відразу (мал. П.3.1).

Orig:1.gif

Мал. П.3.1. Відразу ясно, що треба викачувати...

Проте просто використовувати як заслання ікони архівів -ето банально і нецікаво... Повній ідентичності з інтерфейсом операційної системи досягти не можна, та і немає чого, оскільки при роботі з браузерамі користувачі вже давно звикли до одинарного клацання для доступу до даних, а не до подвійного.
Проте все, що працюють з Windows 98 і більш старшими версіями цієї операційної системи, пам'ятають про можливість набудувати вигляд тек так, що при наведенні курсора ікона файлу затінюватиметься, а при натисненні у цей момент лівої кнопки миші файл відкриється (мал. П.3.2). Так, можливо, зробити ікони файлів, призначених для завантаження, що такими ж затемняються, як і в Windows? Уявіть собі - навів відвідувач курсор миші на значок, а він став темним, відвів - він став звичайним.

Orig:2.gif

Мал. П.3.2. Затінювання ікони під курсором

То чом би не реалізувати такий же ефект на web-странице, що містить заслання на архіви або інші файли, що підлягають завантаженню або відкриттю?
Але як це зробити?
Можна, зрозуміло, використовувати традиційний метод - використовувати два варіанти значка (звичайний і затемнений) і за допомогою невеликого скрипта організувати їх заміну один на одного при наведенні і відході курсора миші. Проте такий пристрій сторінки приведе до того, що на сторінку доведеться помістити ще і сценарій для попереднього завантаження картинок (інакше відповідні варіанти значків завантажуватимуться лише при наведенні миші, тобто - не відразу). Крім того, при збереженні web-страницы на локальному диску відвідувача ікони, що завантажуються в сценаріях, не копіюються на жорсткий диск, і у результаті під час роботи користувача із збереженою сторінкою при наведенні курсора миші ікони замінюватимуться на білі "дірки", що, природно, не може вважатися вдалим рішенням.
Проте для досягнення необхідного ефекту цілком можна обійтися і одним зображенням, якщо використовувати так звані "фільтри" - сприймані браузером команди, що дозволяють особливим чином перетворити зображення або текст, до яких вони застосовуються.
Якщо ви побажаєте використовувати на web-странице фільтри для досягнення ефекту затемнення ікон при наведенні на них курсора, то в початок сторінки, в розділ <head> слід додати невеликий скрипт, розібраний нижче по строчках. Синтаксис Javascript багато в чому схожий на синтаксис РНР, так що вивчення даного сценарію навряд чи стане для вас проблемою.
Початок сценарію:

Для економії місця використовується одна функція, якою повідомляється ім'я графічного об'єкту на web-странице, на якому використовується затемнення, і необхідна дія - або вживання цього затемнення, або його відміна.

function g (с,w)
{

Якщо потрібно "затемнити" картинку:

if (w==0)

застосовуємо фільтр "light", який забарвлює картинку в певний колір...

з.style.filter="light";

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

if (з.filters.light) {
з.filters.light.addAmbient(130,130,210,120) }

Ну а якщо потрібно, навпаки, повернути картинці первинний вигляд, то просто відміняємо всі фільтри.

else
з.style.filter=0
}

От і все:

}
</script>

Вищеописаний сценарій "обслуговуватиме" всі картинки на сторінці, для яких ви побажаєте застосувати ефект "затемнення". Ну а щоб це відбувалося - в тег кожної картинки, для якої потрібне "затемнення", слід вставити команди
"onmouseover="g (this,0)" onmouseout="g (this,1)", наприклад:

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

Orig:3.gif

Мал. П.3.3. Затемнення ікони під курсором. Але вже на сайті, а не на Робочому столі

На жаль, даний прийом працює лише в браузере Microsoft Internet Explorer версії 5.0 і старше. Користувачі ж останніх браузеров побачать просту картинку, що не переливається, і нічого більшого.
Приклади сценарію, а також ікони архівів ви можете узяти з адрес http://www.harchikov.ru, http://antorlov.chat.ru, http://karamur2a.chat.ru. Просто копіюйте картинки і переписуйте сценарій з "Джерела HTML", а потім розміщуйте на своєму сайті.

На правах реклами: 1 2

:: Меню ::

ГОЛОВНА

Введення

Небагато про Web-программировании

PHP: Історія. Місця. Джерела.

PHP: Основи

PHP: Вибіркове завантаження

PHP: Простий інтернет-магазин

PHP: Папкопотрошилка

PHP: Закачування файлів

PHP: Авторизація доступу

PHP: Гостьова книга

PHP: Система оцінки матеріалів

PHP: Файловий менеджер

PHP: Корисні дрібниці

PHP: Способи передачі даних між окремими сторінками

Висновок

Додаток 1. Перетвори свій сайт на портал

Додаток 2. Використовуй те, що під рукою - і не шукай завжди інше

Додаток 3. На сайті - як в "Вінде"

:: Реклама ::

Настройка і оптимізація комп'ютера Найкращі Дитячі садки Києва на Печерську
Завітайте у Дитячий садок Київ на Печерську

:: Статистика ::

:: Навігація ::

	Головна
	Гостьова книга
	Додати у вишукане