КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Листинг 4.8. Файл chapter4/ourCD/toc. html
|
|
|
|
<HTML>
<BODY BGCOLOR="#BOFFD8">
<SCRIPT LANGUAGE="JavaScript">
<!--
function loadPage(szNewURL,szTitle)
{
parent.mainpage.window.location.href=szNewURL;
parent. title. window. location. href=szTitle;
}
//-->
</SCRIPT>
<FONT FACE="Arial, Helvetica" SIZE=1>
<P>
<A HREF="Javascript:loadPage('main.html', 'title.html');"><IMG SRC="pic/fcd_62.gif" BORDER=0 АLT="Ласкаво просимо"></А>
<BR>
<A HREF="javascript:loadPage('books/home.html', 'books/title.html');"><IMG SRC="pic/fcd_82.gif" BORDER=0 ALT="Книги"></А>
<BR>
<A HREF="javascript:loadPage('articles/articles.html', 'Articles/title, html');"><IMG SRC="pic/fcd_102.gif" BORDER=0 АLТ="Статті"></А>
<BR>
...
<P>
</BODY>
</HTML>
Функція loadPage завантажує у фреймы mainpage і title документи HTML, адреси URL який передаються їй через параметри. Для завантаження установлюється властивість location. href для вікна відповідного фрейма:
parent. mainpage. window. location. href=szNewURL;
parent. title. window. location. href=szTitle;
Для виклику функції loadPage використовується така конструкція:
<A HREF="javascript:loadPage('main. html', 'title. html');"><IMG SRC="pic/fcd_62. gif" BORDER=0 ALT="Ласкаво просимо"></A>
Тут у параметрі HREF оператора посилання <А> після ключового слова javascript розташований рядок виклику функції. Звернете увагу на використання одинарних і подвійних лапок. Тому що в сценаріях JavaScript вкладення однакових лапок неприпустимо, для рядків, переданих функції в якості параметрів, застосовані одинарні лапки Значення параметра HREF виділено при цьому подвійними лапками.
5. РАСТРОВЫЕ ЗОБРАЖЕННЯ
Растровые зображення у виді файлів форматів GIF і JPEG широко застосовуються в документах HTML, тому що з їхньою поміччю можна значно поліпшити зовнішній вигляд сторінок серверів Web.
На жаль, можливості HTML не дозволяють домогтися достатньо складних видеоэффектов без застосування додаткових засобів, таких, як аплеты Java, компоненти Active і сценарії JavaScript. Фактично крім статичної графіка можна використовувати тільки анімаційні зображення, побудовані з застосуванням многосекционных файлів GIF, і сегментированные графічні зображення. Останні потрібні для створення посилань.
|
|
|
У цій главі будуть розглянуті деякі можливості графічного оформлення сторінок серверів Web, що будуть у розпорядженні при використанні сценаріїв JavaScript.
5.1. Растровое зображення як об'єкт
Для того щоб вбудувати растровое зображення в документ HTML, необхідно використовувати оператор <IMG>. Загальний вид цього оператора показаний нижче:
<IMG SRC="Адреса_файла_зображення" NAМЕ="Ім'я_иэображения"
WIDТН="Ширина" HEIGНТ="Висота">
Тут зазначені тільки три параметри. Повний список параметрів оператора <IMG> із стислим їхнім описом буде нижче:
Параметр Опис
SRC Адреса URL файла з растровым графічним зображенням
NAМЕ Ім'я об'єкта, що відповідає растровому графічному зображенню. Це ім'я може бути використане для посилання на об'єкт у сценаріях JavaScript
ALT Текстовий рядок, що відображається в тих випадках, коли браузер не може показувати графічні зображення або коли така можливість відключена
ALIGN Вирівнювання тексту щодо графічного зображення:
LEFT - по лівій межі;
RIGHT - по правій межі;
TOP - по верхній межі;
MIDDLE- по центрі зображення;
BOTTOM - по нижній межі;
ТЕХТТОР - вирівнювання по верхній межі щодо найвищих символів у текстовому рядку;
ABSMIDDLE - вирівнювання середини текстового рядка щодо середини зображення;
BASELIN вирівнювання нижньої рамки зображення щодо базової лінії текстового рядка;
ABSBOTTOM - вирівнювання нижньої межі зображення щодо нижньої межі поточного рядка.
HEIGHT Висота зображення в пикселах
WIDTH Ширина зображення в пикселах
BORDER Ширина рамки навколо зображення в пикселах (використовується тільки браузером Netscape Navigator)
|
|
|
HSPACE Ширина вільного простору в пикселах, що відокремлює зображення від тексту по горизонталі
VSPACE Ширина вільного простору в пикселах, що відокремлює зображення від тексту по вертикалі
USEMAP Адреса URL файла, що містить так називану карту зображення. Ця карта використовується для сегментированной графіки
ISMAP Цей параметр указує, що дане зображення является сегментированным
Параметри оператора <IMG> визначають адресу файла з изображением. вирівнювання тексту, розташованого біля зображення, і т.д. За допомогою параметрів HEIGHT і WIDTH можна виконувати масштабирование графічних зображень. Значення цих параметрів можна вказувати у відсотках від ширини вікна перегляду.
Масштабирование дозволятити підготувати графічний файл щодо невеличкого розміру, що швидко передається через Internet і займає при цьому значну площу у вікні браузера. Проте, не можна масштабировать сегментированные графічні зображення і фонові зображення.
Застосування сегментированной графіки докладно розглянутий у 29-м томі "Бібліотеки системного програміста".
Якщо в документі HTML розміщено декілька растровых зображень, то можна адресувати відповідні об'єкти як елементи масиву document.images. Наприклад, перше зображення адресується в такий спосіб: document.images[0]. Проте в деяких випадках зручніше користуватися іменами зображень, визначеними параметром NAME оператора <IMG>.
Об'єкт-зображення має властивість src, що відповідає параметру SRC оператора <IMG>. Адресуючись до цієї властивості, можна не тільки визначати поточну адресу URL зображення, але і задавати новий. Цим скористаємося в такому поділі.
5.2. Динамічна заміна растровых зображень
Одна з найбільше цікавих можливостей, доступних при використанні сценаріїв JavaScript, полягає в динамічній заміні графічних зображень, зазначених у параметрі SRC оператора <IMG>.
Наприклад, у такому рядку сценарію JavaScript указується, що зображення з ім'ям btnl повинно мати адресу URL pic/aurap. gif:
document. btnl. src="pic/aurap. gif"
Тут зазначена неповна адреса URL, проте можна вказувати і повну адресу.
Що відбудеться при виконанні приведеної вище рядка сценарію? Область, виділена у вікні браузсра для растрового зображення btnl, буде заповнена зображенням pic/aurap.gif. Якщо до цього там було інше зображення, воно буде замінено на нове.
|
|
|
Як можна скористатися динамічною заміною растровых зображень?
По-перше, ви можете створювати графічні посилання, що змінюють свій вид, коли над ними знаходиться курсор миші. По-друге, за допомогою заміни растровых зображень у сценарії JavaScript можна створювати анімаційні зображення.
Роздивимося приклади сценаріїв, що вирішують зазначені задачі.
5.2.1. Зміна зовнішнього вигляду графічних посилань
У документі HTML знаходяться дві кнопки, створені як растровые графічні зображення. Вони використовуються для активізації посилань, що відповідають двом іншим документам HTML.
Якщо розташувати курсор над однієї з цих кнопок, напис на цій кнопці змінить свій цвіт. Це досягається динамічною заміною графічного зображення кнопки за допомогою сценарію JavaScript.
Вихідний текст документа HTML показаний у листинге 5.1.
|
|
|
|
|
Дата добавления: 2014-11-29; Просмотров: 311; Нарушение авторских прав?; Мы поможем в написании вашей работы!