Зображення-карта

Тепер давайте розглянемо складніший приклад. Уявимо собі, що треба зробити сайт, присвячений опису старовинного комп'ютера ATARI-800. Вже підготовлені файли з описом його монітора, самого комп'ютера і дисковода: monitor.html, computer.html і diskovod.html (ми для перевірки працездатності прикладу теж створили такі файли, але в них нічого не немає, окрім заголовка). Наше завдання: створити титульну сторінку сайту і помістити на неї зображення комп'ютера (мал. 3.4).

При цьому логічно було б зробити так, щоб клацання на зображенні монітора переводило читача на сторіночку з описом монітора, щел цок на зображенні дисковода - на сторіночку з описом дисковода і клацання на зображенні самого комп'ютера - на сторіночку з його описом. Можна, звичайно, “розрізати” зображення три і з кожного дати гіперпосилання на відповідний файл. Але при цьому руйнуватиметься цілісність композиції на фотографії комп'ютера. Що ж робити?

Виявляється, є можливість встановити декілька гіперпосилань з одного малюнка, не “розрізаючи” його! Таке зображення називається кар тій графічних посилань (imagemap}. Створення карти графічних посилань - операція досить копітка, але результат зазвичай досить ефектний. Робиться це так.

Ось, наприклад, наш файл diskovod.html:

Мал. 3.4. Зображення комп'ютера, з якого ми робитимемо

Графічну карту посилань

1. Спочатку малюнок упроваджується на веб-сторінку звичайним способом, за допомогою тега <IMG>:

2. Потім необхідно встановити в цьому теге атрибут USEMAP=. Його значення повинне містити ім'я карти графічних посилань, з передуй тільним знаком #, Якщо карта ще не створена, як в нашому випадку, то їй можна дати будь-яке ім'я:

4. Карта графічних посилань починається з тега < МАР> і завершується зак ривающим тегом </МАР> . У теге <МАРИ> слід встановити (обов'язково!) єдиний можливий атрибут NAME=. Його значенням повинне бути ім'я карти, на яке ми посилалися в теге <МАР> (за допомогою атрибуту USEMAP=). В даному випадку це повинно бути ім'я "compmap":

5. Між тегамі <МАРИ> і </МАР> повинна знаходитися основна частина карти. Вона складається з декількох тегов <AREA>, кожен з яких визначає активну область малюнка. (При клацанні миші на “актив них областях” може відбуватися переміщення по гіперпосиланню, а решта частини зображення нічим не відрізняється від звичайного малюнка.) В даному випадку нам потрібно визначити три такі “активні області”: зображення монітора, комп'ютера і дисковода.

7. Далі починається найнеприємніше в складанні карти графічних посилань: потрібно визначити координати кожній з активних областей і записати їх як значення атрибуту COORDS=.

Якщо “активна область” прямокутна, то слід вказати координати лівого верхнього її кута і правого ніжнего. Місцеположення будь-якої крапки на малюнку може бути визначене за допомогою двох чисел - її горизонтальної і вертикальної координат. Найлівіша верхня крапка на малюнку має координати “0,0”. Чим більше горизонтальна координата, тим правіше розташована крапка, і, відповідно, чим більше вертикальна координата, тим крапка нижча. Наприклад, якщо малюнок має розмір 400х300 крапок і нам потрібно визначити прямо угольнуюактівную область, що займає його лівий верхній кут і половину ширини і висоти малюнка, що має, ми повинні будемо написати наступне:

У цьому записі атрибут COORDS= визначає прямокутник за допомогою двох крапок: одна з них має координати “0,0”, тобто лівий верх ній кут, а інша - “ 200,150”, тобто це центральна точка малюнка розміром 400х300.

Якщо “активна область” кругла, то завдання трохи спрощується: потрібно визначити координати тільки однієї крапки - центру кола, а також вказати її радіус, наприклад:

Такий запис визначає круглу “активну область”, розташовану в центрі нашого гіпотетичного малюнка розміром 400х300 (координати центральної точки- “200,150”). Коло має радіус 40 крапок.

І, нарешті, найскладніший і найбільш випадок, що часто зустрічається, - багатокутна “активна область”. Тут потрібно послідовно

вказати координати всіх кутів багатокутника. Оскільки таких кутів може бути дуже багато, то і значення атрибуту COORDS= при знаходить загрозливі розміри... Розглянемо простій приклад. Якщо на нашому малюнку розміром 400х300 ми хочемо визначити область у формі рівнобедреного трикутника, підстава якого проходить рівно посередині малюнка, займаючи всю його ширину, а вершина нахо дітся посередині верхньої межі малюнка, то це можна зробити так:

Як бачите, шість координат визначають три крапки - три кути нашого трикутника. В даному випадку їх послідовність не дуже важлива (можна було написати, наприклад, "400,150,0,150,200,0"), але коли коли чество кутів більше, стає важливим порядок з'єднання крапок. Наприклад, записи

І

дадуть різні результати. У першому з випадку це прямокутник з вирізаним трикутником знизу, а в другому випадку вирізаний трикутник знаходиться справа.

Відлякуючим моментом в цій технології є те, що доводиться якимсь чином з'ясовувати координати кожної потрібної точки. На реальному малюнку це неможливо зробити “на око”, і доводиться, наприклад, з'ясовувати всі координати в якому-небудь графічному редакторові, а вже потім переносити їх в HTML-документ. На щастя, в послід них версіях деяких HTML-редакторів (наприклад, Allaire Homesite) є вбудовані засоби для установки координат на картах графічних посилань.

8. Проте атрибути SHAPE= і COORDS= - це ще не все. У теге <AREA> необхідно встановити ще найголовніше - атрибут HREF=, що визначає гіперпосилання, тобто куди ж повинен потрапити користувач при клацанні мишею на цій “активній області”. Тут ніяких складнощів не немає - атрибут HREF= тега <AREA> поводиться так само, як якби він був в звичайному теге <А> .

9. Крім того, буває корисно визначити також атрибут ALT=. Його значе ніє може містити пояснюючий текст, який “спливатиме” при наведенні миші на “активну область”.

Отже, тепер ми можемо спробувати обвести “активні області” нашого зображення комп'ютера (див. мал. 3.4). Природно, що всі вони повинні бути багатокутними, оскільки жоден з трьох об'єктів не “укладається” в прямокутник або круг. Подивимося, що вийде в результаті.

Результат цих праць представлений на мал. 3.5. Як бачите, на перший погляд малюнок на сторіночці цілком звичайний - наявність “активних областей” нічим не видається. Тому необхідний пояснюючий підпис під малюнком.

Якщо поводити мишею над малюнком, то можна відмітити, що над “актив нимі областями” покажчик миші міняє свій вигляд, а якщо припинити мишу над “активною областю” - з'явиться відповідна всплива ющая напис. І ще цікавий момент: у більшості броузеров можна своїми очима побачити межі активних областей. Для цього треба натиснути кнопку миші на “активній області”, і, не відпускаючи її, відвести мишу за межі області, і там відпустити кнопку. Тоді межа відповідної “ актив ний області” залишиться виділеною.