Зображення і динамічний html

Зображення і динамічний HTML

об'єкт зображення

Одним з об'єктів, які містяться в документі, є об'єкт зображення. На жаль, цей об'єкт підтримується не всіма браузерами, які керують сценаріями. Найстарішими версіями браузерів, які ще працюють з такими об'єктами, є NN3 і IE4. Тому все, що буде описано в цьому розділі, не застосовується, якщо використовуються NN2 (всі платформи) або IE3 (для Windows). Якщо так, то можна використовувати спеціально наведений для цього випадку код, який слід розмістити в сторінці, щоб уникнути помилок при роботі зі старими версіями браузерів.







Хоча, якщо чесно, таких старичків в мережі залишилося зовсім мало. І ними, я думаю, можна знехтувати.

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

Змінні зображення

Перевага використання керованих в сценаріях об'єктів зображень полягає в тому, що сценарій може змінювати зображення, які вже займають прямокутну область на сторінці. У браузерах IЕ4 + і NN6 + можна навіть змінювати розмір таких зображень з виконанням відповідного обтікання решти вмісту сторінки.

Попереднє завантаження зображень

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

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

Змінюються зображення в документі таким же способом.

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

Лістинг 7.1. Попереднє кешування зображень

створення ролловеров

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

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







Лістинг 7.2. підкачка малюнків

Тільки браузери, що працюють з об'єктами зображень, можуть виконувати завантаження зображень в кеш. Тому вся відповідна послідовність знаходиться всередині конструкції if. в умовному операторі якої перевіряється наявність масиву document.images. У браузерах старих версій це значення не може бути визначено, що відповідає значенню false при перевірці умови в блоці if.

Завантаження зображень в пам'ять починається зі створення двох масивів об'єктів зображень. В одному масиві зберігається інформація про зображення, які використовуються для кнопок в неактивному стані (off). В іншому містяться зображення активних кнопок (в стані on). У цих масивах як індекси замість цілих чисел використовуються рядки. Строкові назви відповідають тих імен, які присвоєні видимим графічних об'єктів, чиї дескриптори наведені в вихідному коді нижче. В цьому випадку код більш простий для сприйняття. Наприклад, запис offImgArray [ "play"] з упевненістю дає зрозуміти, для чого потрібен цей елемент. Як можна буде в подальшому побачити з лістингу, підкачувати зображення не конфліктують з іншими відображеними на сторінці малюнками (таке можливо, якщо на засланні на відображені зображення при підкачування використовуються виключно числові індекси).

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

Як можна побачити з наступного фрагмента HTML-коду, коли користувач наводить вказівник на будь-який з відображених графічних об'єктів документа, обробник події onMouseOver (в об'єкті документа) викличе функцію imageOn (). передавши їй назву конкретного зображення. Функція imageOn () використовує цю назву для синхронізації записів масиву document.images (відображені зображення) і масиву розміщених в пам'яті зображень активних кнопок onImgArray. Властивість src елементів цього масиву присвоюється відповідним властивостям src зображень документа.

To ж відбувається при використанні обробника події onMouseOut. який переводить зображення в "вимкнений" стан, для чого використовує функцію imageOff () з тим же індексним значенням в якості параметра.

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

Кожне зображення знаходиться в оточенні об'єкта посилання. Так доводиться поступати, оскільки у об'єкта посилання є обробники події, потрібні для завдання відповідної реакції сценарію на маніпуляції користувача з мишею, а це дозволяє підтримувати сумісність документа з NN3. Кожен обробник події onMouseOver викликає функцію imageOn (). передаючи при цьому назва підкачувати об'єкта зображення. Оскільки в обох обробниках onMouseOver і onMouseOut необхідно використовувати вираз return true. щоб процес був запущений, виклик другої функції setMsg () об'єднаний з вимогою return true. Функція setMsg () завжди повертає значення true. а наявність ключового слова return перед викликом цієї функції забезпечує потрібний результат. Це просто дозволяє зменшити обсяг використовуваного коду, ось і все

При введенні цього лістингу з наступним його використанням слід уважно стежити за тим, щоб кожен дескриптор <А> разом з його атрибутами розташовувався весь в одному рядку.

Для того, щоб побачити виконання цього довжелезного сценарію намалюйте відповідні кнопки самостійно. Коли буде готове, внесіть (якщо треба) необхідні зміни в сценарій. Лістинг ж краще ввести самостійно. Тільки тоді можна буде відчути всю красу створення сценарію.

Більше динамізму в HTML

Технологія підкачки об'єктів зображень є тільки попередніми знайомством з тими напрацюваннями, які на сьогоднішній день доступні в динамічному HTML (Dynamic HTML або DHTML). У браузерах IЕ4 + і NN6 + є можливість вносити зміни в стиль і вміст елементів HTML. Весь вміст може буквально "витанцьовує" на сторінці.

З тієї причини, що довгі роки Microsoft і Netscape використовували принципово різні підходи до розвитку об'єктних моделей документа, тільки в браузерах IE5 і NN6, завдяки переходу на стандарт W3C DOM, стало можливим використовувати один і той же код сценаріїв DHTML в обох типах браузерів. Але навіть при цьому IE5 і IE5.5 не підтримують стандарт W3C DOM в тій мірі, в якій це робить NN6. Якщо передбачувана аудиторія, на яку розрахований сценарій, використовує в основному IE, то можна задіяти опцію, яка дозволяє реалізувати об'єктну модель Microsoft, сумісну з браузерами аж до IE4 (якщо не брати до уваги деяких проблем із сумісністю для IE4 в Macintosh).

Так закінчується останній урок (саме урок!) Цього керівництва. Якщо ви сумлінно вивчили всі, що було наведено вище, і старанно вводили пропоновані рядка коду, то вже готові до того, щоб пірнути з головою в написання сценаріїв. Звичайно, тих основ, що дав я на сторінках керівництва явно недостатньо для продуктивної роботи, але обіцяю, що в недалекому майбутньому опублікує відомості довідкового характеру і окремі статті. Все це допоможе вам і не раз.

Бажаю удачі!






Схожі статті