Формування карти гіперпосилань

Карти посилань

Якщо тег < IMG> з ім'ям файлу рисунка розмістити між тегами < А> і < /А>, то з цим рисунком буде пов'язане одне гіперпосилання. Можна зробити і по-іншому: поділити рисунок на області, і кожну з них перетворити на гіперпосилання. Такі області називають

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

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

Формування карти гіперпосилань

Графічну карту посилань створюють за допомогою кількох тегів. У тегу < IMG> визначають атрибут SRC, щоб задати зображення, і атрибут USEMAP, значенням якого є ім'я карти (має починатися символом #). Власне карту створюють за допомогою тегу < МАР> з атрибутом NAME, який містить ім'я карти (визначене в атрибуті USEMAP, але без символу #) та тегу < /МАР>. Між ними записують теги < AREA>, які задають параметри гарячих областей. При цьому використовують такі атрибути:

• HREF — визначає гіперпосилання, пов'язане з областю;

• SHAPE — визначає форму області, його значеннями можуть

бути:

• rect — прямокутник;

• polygone або poly — багатокутник;

• c i r c l e — коло;

• COORDS — містить координати області у вигляді взятого в лапки списку чисел, розділених комою. Для прямокутника задають чотири числа — координати верхнього лівого і правого нижнього кутів, для багатокутника — послідовні координати кожного кута, для кола — координати центра і радіус.

Приклад визначення карти посилань:

< IMG SRC=" map.bmp" USEMAP=" #karta" >

< МАР NAME=" karta" >

< AREA HREF=" l.html" SHAPE=" rect" COORDS=" 70, 250, 160, 270" >

< AREA HREF=" 2.html" SHAPE=" circle" COORDS=" 260, 140, 60" >

< /MAP>

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

Місце розташування будь-якої точки на малюнку визначають два числа — її горизонтальна та вертикальна координати. Верхня ліва точка має координати (0; 0). Більшим горизонтальним координатам відповідають правіші точки, більшим вертикальним — нижчі.

Наприклад, якщо малюнок має розмір 400x300 пікселів, і необхідно визначити прямокутну область, що займає його верхню ліву частину та має вдвічі меншу ширину і висоту, запис тегу < AREA> буде таким:

< AREA SHAPE=" rect" COORDS=" 0, 0, 200, 150" >

У цьому записі атрибут COORDS визначає прямокутник за допомогою двох точок: лівого верхнього кута з координатами (0; 0) і правого нижнього з координатами (200; 150) (центральна точка малюнка, що має розмір 400x300).

Якщо гаряча область є колом, то слід зазначити координати лише однієї точки — центра кола, а також задати його радіус, наприклад: < AREA SHAPE=" circle" COORDS=" 200, 150, 40" >

Такий запис визначає круглу гарячу область, розміщену в центрі малюнка розміром 400x300. Координати центральної точки (200; 150), радіус кола — 40 пікселів.

Найскладніший випадок — багатокутна гаряча область, для якої потрібно послідовно зазначати координати всіх кутів. Припустимо, що на малюнку розміром 400x300 пікселів потрібно визначити гарячу область у формі рівнобедреного трикутника, основа якого

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

< AREA SHAPE=" poly" COORDS=" 0, 150, 400, 150, 200, 0" >

ШІСТЬ координат задають три точки — кути трикутника. У цьому випадку їх послідовність неважлива, і ви могли б написати, наприклад, 400; 150; 0; 150; 200; 0, проте коли кількість кутів є більшою, важливим є порядок з'єднання точок.

Наприклад, записи

< AREA SHAPE=" poly" COORDS=" 0, 0, 200, 0, 200, 150, 100, 75, 0, 150" >

< AREA SHAPE=" poly" COORDS=" 0, 0, 200, 0, 100, 75, 200, 150, 0, 150" >

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

із вирізаним трикутником знизу, а в другому — з вирізаним трикутником

праворуч.

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

Вправа

Створимо сайт «Моя фірма». Його головна сторінка виконана у вигляді графічного зображення, певні частини якого є гарячими областями. Вибравши їх, відвідувач може побачити інформацію про напрями роботи фірми: «Замовники», «Продукція», «Майбутнє».

У папку веб-сайту слід помістити такі файли:

• графічний файл map.jpg

• HTML-документи 1.html, 2.html, 3.html, що містять описи напрямів роботи фірми;

• HTML-документ map.html, в якому для гарячих областей малюнка map.jpg визначені гіперпосилання на документи 1.html, 2.html, 3.html.

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

1. За допомогою програми Paint або Adobe PhotoShop створіть файл map.jpg.

2. У редакторі Блокнот створіть документи, де описано напрями роботи фірми, і збережіть їх як файли 1.html, 2.html, 3.html.

< HTML>

< TITLE> Замовники фірми " Калина" < /TITLE>

< BODY BGCOLOR=cyan>

< H1> Наші замовники< /Н1>

< Н2> Фірма " Карпати" < /Н2>

< Н2> Фірма " Золотий жук" < /Н2>

< Н2> Фірма " Пролісок" < /Н2>

< /BODY>

< /HTML>

< HTML>

< TITLE> Вироби фірми " Калина" < /TITLE>

< BODY BGCOLOR=cyan>

< Н1> Наша продукція< /Н1>

< Н2> Шафи для вітальні< /Н2>

< Н2> Кухонні стільці< /Н2>

< Н2> 0фісні столи< /Н2>

< /BODY>

< /HTML>

< HTML>

< TITLE> Перспективи фірми " Калина" < /TITLE>

< BODY BGCOLOR=cyan>

< Н1> Наша майбутня продукція< /Н1>

< Н2> Комп'ютерні столи< /Н2>

< Н2> Стилізовані акваріуми< /Н2>

< Н2> Набір меблів для лоджії< /Н2>

< /BODY>

< /HTML>

3. Створіть файл map.html, який містить такий код:

< HTML>

< TITLE> Напрями роботи фірми " Калина" < /TITLE>

< BODY BGCOLOR=pink>

< IMG SRC=" map.jpg" USEMAP=" #kalyna" >

< MAP NAME=" kalyna" >

< AREA HREF=" l.html" ALT=" РО3ПОВІДЬ ПРО ЗАМОВНИКІВ"

SHAPE=" rect" COORDS=" 70, 250, 160, 270" >

< AREA HREF=" 2.html" ALT=" РОЗПОВІДЬ ПРО ПРОДУКЦІЮ"

SHAPE=" rect" COORDS=" 260, 140, 345, 160" >

< AREA HREF=" 3.html" ALT=" РОЗПОВІДЬ ПРО МАЙБУТНЄ"

SHAPE=" rect" coords=" 2, 4, 98, 36" >

< /MAP>

< /BODY>

< /HTML>

4. Відкрийте файл map.html у вікні браузера.

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

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

< НЗ> Виберіть на малюнку напрям роботи фірми< /НЗ>

Якщо розмістити його між тегам «Виберіть на малюнку напрям роботи фірми». Провівши мишею над малюнком, можна виявити, що над гарячими областями вказівник миші

змінює свій вигляд, як над звичайними посиланнями. Якщо ж зупинити його над гарячою областю, побачите спливаючий напис — результат дії атрибута ALT у тегу < AREA>.