Цей рядок почервоніє

Цей простий приклад ілюструє доступ до якості кольору елемента H1. Вся дія, власне, відбувається у виразі onmouseover="this.style.color='red'"; Цей вираз мови JScript означає, що при походженні події наоб'єкт, з яким сталася подія (це це), його безліч стилю і властивість в цій множині - барви повинні змінювати своє значення на 'red'. (Зверніть увагу, що red пишеться в одинарних лапках. Це означає, що red - символьний рядок, а не якийсь змінний)

Щоб при виході з зони об'єкта, він знову змінював свій колір, наприклад, назад, використовуйте подію наобсязі.

Цей рядок динамічно змінює свій колір

Ми навчилися динамічно змінювати стилі. Але це ще не найголовніша можливість, яку надає DHTML. А якщо вам не подобається стандартний стиль оформлення сторінки, який використовує Internet Explorer? Чому посилання завжди повинні мати синій колір, а шрифт розмір 16 пікселів? Чи не можна якось змінити це? Можна, можливо! І треба! Якщо ви хочете, щоб ваші сторінки відрізнялися від багатьох інших, виділялися чимось незвичайним і максимально діяли на сприйняття їх відвідувача, використовуйте нестандартні стилі! Але це не означає, що ви повинні всі свої повідомлення писати кислотно жовтим кольором, тут вже справа смаку, головне те, що Dynamic HTML дає можливість використовувати свою фантазію, надаючи багатий набір можливостей.

То як встановити нестандартний стиль об'єкта? Насамперед через властивість STYLE. Подивіться:

Наведи на мене мишу

Цей рядок виводитиме на екран об'єкт

зеленого кольору, причому курсор, при наведенні на нього змінюватиме свій вигляд на "руку", яка зазвичай сигналізує те, що цейоб'єкт можна "клацнути".

Тут, об'єкту були встановлені два свійста, подібним чином можна змінювати всі властивості, які підтримує об'єкт.

Це приклад використання стилів

Стилі можна встановлювати не лише таким чином. Дуже зручно використовувати для встановлення стилів об'єктів класи. Під класом тут мається на увазі набір деяких якостей та його значень, об'єднаний однією класс. Класу надається ім'я, а потім весь цей набір властивостей можна встановити для будь-якого конкретного об'єкта. Це дуже зручно, якщо, наприклад, у вас є кілька посилань і для кожної з них треба встановити червоний колір тексту та ніжно-блакитний колір фону, а також жирний шрифт, то не треба мучити себе і набивати щоразу ці установки у властивості Style кожного об'єкта, зробіть так:

Як бачите, тут наведено приклад використання класу, він набір властивостей. Клас визначається в блоці за допомогою блоку

Визначено два класи під іменами textRed та textBlack. При ініціалізації об'єкту

присвоюється клас textBlack, зверніть увагу, що в цьому випадку використовується атрибут class, а ім'я класу пишеться без лапок. Це відбувається тому, що цей код є частиною мови HTML, а от коли ім'я класу треба змінити, у подвійних лапках знаходиться частина Script-мови, тому використовується атрибут className, і ім'я класу пишеться в одинарних лапках.

За допомогою класів можна змінювати всі атрибути стилю за винятком позиціонування (position). Ви не можете визначити стиль позиціонування: абсолютний або непозиціонований інакше, як через прямий HTML-код.

Коли ви надаєте значення атрибутам,пам'ятайте, що ці значення завжди - рядки. Тому ви не можете маніпулювати значеннями властивостей у математичному сенсі. І спеціально для цього було запроваджено кілька властивостей, значення яких – цілі числа.

Якщо властивість передбачає деяке розмаїття величин, ви можете вказувати величину, у якій вводите значення. У наведених нижче прикладах використовуються величини points і pixels. Вони задаються відповідно покажчиками pt та px.

Якщо ви не вказуєте вказівник, використовується значення за промовчанням. Є одна перевага цього: ви можете вказати значення якості, як ціле число. Два наступні рядки ідентичні:

document.all.MyElement.style.fontSize = "72"; document.all.MyElement.style.fontSize = 72;

Глава 3. Створення оригінальних стилів

Internet Explorer пропонує вам свій стиль, що називається за промовчанням. Цей стиль передбачає біле чисте тло, чорний колір шрифту, всі посилання підкреслені і синього кольору і т. д. Що якщо вам не подобається все це? Ви вже вмієте міняти різноманітні атрибути безпосередньо. Навіть якщо однакових за значенням об'єктів багато, ви вже вмієте застосовувати класи. Але є ще одна можливість. Для завдання всього стилю документа цілком застосовуються звані Ієрархічні Стилеві Таблиці (Cascade Style Sheets - CSS), які є набір установок властивостей різних об'єктів. Чимось вони нагадують класи, але якщо клас сходить всередині документа і може бути застосований, а може бути і ні, то CSS, якщо він підключений, то установки в ньому впливають безпосередньо на всі об'єкти в документі.

CSS дуже схожі на класи тільки з тією різницею, що в них описується стиль для вже відомого об'єкта. Для наочного прикладу, огляньте зараз свою кімнату (офіс, зал.), в якій ви знаходитесь.Напевно, ви побачите багато різних предметів (стіл, крісло, вікно, комп'ютер). Кожен з цих предметів-об'єктів має характеристики, і вам треба скласти список цих предметів та їх характеристик. Можливо у вас вийде щось таке:

стіл: колір - коричневий матеріал - дерев'яний комп'ютер: колір - білий матеріал - пластмаса призначення - для роботи

Звичайно, ви можете піти іншим шляхом, але тільки CSS складаються саме так, де замість предметів виступають об'єкти, та й їхні характеристики трохи інші. Наприклад, ось вам уривок такого документа:

body background-color: rgb (255,255,153); color: rgb(51,51,153); >

h1 color: rgb(255,0,0); font-family: arial, helvetica; >

Тут задається яким буде стиль елемента BODY та H1. Ті параметри, які не задано, залишаються за замовчуванням.

Створення CSS не потребує особливих зусиль і може бути виконане у простому блокноті, хоча для цих цілей і існують спеціальні програми, що полегшують роботу та наочно показують, яким буде виглядати майбутній документ із застосуванням цього стилю. Пошукайте такі програми у себе на диску чи у знайомих.

Існує два способи підключення CSS. Перший – задати її в елементі STYLE на початку документа, як клас. Це робиться так:

Цей документ

використовує стильові таблиці

У цьому прикладі на екрані ви побачите два рядки, що складаються з двох об'єктів: H1 і H2. Подивіться, на що перетворився стиль за промовчанням Internet Explorer. Адже ми не робили жодних вказівок у самому об'єкті щодо його стилю. Таким чином, хоч би скільки ви наробили об'єктів H1 і H2, їх стиль завжди буде таким, яким ви його вказали в стильовій таблиці.

Якщо вам подобається стиль, який вистворили, і ви хочете використовувати його у всіх своїх документах. Або ваш документ складається з безлічі HTML сторінок і у них повинен бути однаковий стиль, вам необов'язково щоразу вбивати рядки стильової таблиці на початку документа.

Отже, спочатку ви створюєте таблицю, дотримуючись вказаних вище правил. Потім, ви додаєте в елемент для включення таблиці стилів рядок подібний до наступного:

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

function change_style() if (document.styleSheets.href != null) document.styleSheets.href = "newStyle.css"; >

Якщо стильова таблиця визначена всередині HTML-сторінки, можна додавати нові визначення за допомогою функції addRule (object, style). Де object – об'єкт, а style, відповідно, стильові установки. Ось приклад, у якому після натискання на кнопку, відбувається зміна стильової таблиці:

Це Заголовок 1

Це Заголовок 2

Це абзац. Клацніть на кнопку для зміни його стилю

Переглянувши сторінку з таким кодом, ви побачите, як відбувається зміна стилю шляхом додавання установки до таблиці стилів.

Глава 4. Фільтри та графічні переходи.

Ні для кого не секрет, що найкращими способами подання інформації є наочні картинки. Особливо це дієво, коли картинка ефектно подана. Середовище Microsoft Internet Explorer має набір вбудованих функцій, використовуючи які картинку можна вивести на екран не просто так, моментально, а використовуючи який-небудь прибамбас, при якому вона буде виведена на екран з яким-небудь ефектом, наприкладгоризонтальними смугами чи випадковими шашками; це називається графічним переходом. Також, можна використовувати графічний фільтр, "пропустивши" через який вихідну картинку на виході отримаємо цю ж картинку, але з якимось ефектом, наприклад швидкого руху (це коли все змащене, ніби дивишся з вікна поїзда).

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

Візуальні фільтри – це нове розширення IE 4.0, яке дозволяє легко та просто змінювати видиме відображення вмісту HTML сторінки. Фільтр призначається об'єкту через атрибут filter у безлічі style. Значення властивості filter – рядок, який описує бажаний фільтр, спосіб написання якого дуже схожий на виклик функції. Синтаксис цього рядка такий:

Тут, filtername - ім'я фільтра, а властивості - властивості.

Ось приклад застосування фільтра до об'єкту

У цьому прикладі застосовується фільтр з ім'ям blur, що створює ефект руху. При цьому у нього в параметрах стоїть рядок strenght=50, який позначає силу ефекту рівну п'ятдесяти. Ви також можете застосувати кілька фільтрів одночасно. Наступний приклад розширює попередній, змушуючи картинку перевернутися догори ногами:

Кожен фільтр має набір опціональних аттрибутів, які вказують на спосіб застосування цього фільтра. Деякі фільтри, такі як flipv і fliph, що відображають картинку відповідно по вертикалі та горизонталі, не мають аттрибутів. Застосування одночасно більшого числа фільтрів робиться способом, як показано на прикладі вище.