На цьому уроці ви дізнаєтесь як зробити посилання на окремих областях зображення. Карта посилань. - це створення інтерактивних шарів геометричної форми з відповідними посиланнями.Якщо поділити рисунок на області, і кожну з них перетврити на гіперпосилан, то повне зображення перетвориться на карту посилань, а області будуть "гарячими", тобто вони будуть реагувати на наведення та клацання миши.
Отже, для створення карти посилань необхідні дві речі: Зображення, на якому передбачаються інтерактивні області і карта яка призначена для розміщення областей. <IMG SRC="графічний файл" usemap="#name">
usemap="#name" вказує на ім'я карти до якої буде прив'язане зображення. Замість name можна використовувати будь яке ім'я, але воно має точно збігатися з ім'ям карти. Регістр має значення.
Для створення карти треба застосувати тег-контейнер <MAP name="name"> </MAP> Дуже важливий атрибут name="Ім'я карти". Присвоювання імені мапі дає можливість використати її на певному зображенні.
Час розглянути, що саме знаходиться всередині контейнера MAP і як створити області посилань. На зображення можно створити області прямокутної, круглої та багатокутної форм. Описати їх можна тегом <AREA >
Прямокутна область:
<area href="document.html" shape="rect" coords="x1,y1,x2,y2">
href="document.html" вказує на сторінку яка буде завантажена після натискання на цю область.
shape="rect" вказує на те, що область прямокутної форми.
coords="x1,y1,x2,y2" вказує на координати лівого верхнього та правого нижнього кутів.
Визначити координати необхідних точок можна за допомогою графічного редактора, наприклад Paint.
Для цього треба навести курсор на необхідну точку і записати координати, що висвітлюються в статус - рядочку.
Наприклад:
<Area href="document.html" shape="rect" coords="20,20,300,150">
Виділення круглої області
<area href="document.html" shape="circle" coords="x,y,R">
Для круглої області необхідно вказати shape="circle", координати центра кола x,y та радіус кола R.
Для визначення радіусу R в редакторі Paint необхідно навести курсор на центр кола, зафіксувати координати х,у.
Потім підвести курсор на край кола. з однаковою
координатою Y.
Різниця між координатами х1 центру і х2 краю і буде значення радіусу. R=x1-x2 при y1=y2.
Виділення багатокутної області
<area href="document.html" shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,...,x1,y1">
Багатокутна область використовується для більш точного виділення складної області.
Кутів може бути скільки завгодно багато.
Дла багатокутної області треба вказати shape="poly" і координати x,y всіх кутів.
Останньою координатою має бути перша координата x,y.
Шаблон HNML- кода
<body>
<center>
<h1>Карта України</h1>
<h2>Міста України</h2>
<img src="mapa.png" usemap="#karta">
<map name="karta">
<area href="дніпро2.jpg" share="rect" coords="600,250,650,300">
....додати інші області.........................
</map>
</body>
2. Зробіть архів папки "Карта посилань"
3. Розмістить архів на вашому Google-диску і відкрийте до нього доступ
4. Надішліть посилання на вашу роботу на електронні адреси:
usemap="#name" вказує на ім'я карти до якої буде прив'язане зображення. Замість name можна використовувати будь яке ім'я, але воно має точно збігатися з ім'ям карти. Регістр має значення.
Для створення карти треба застосувати тег-контейнер <MAP name="name"> </MAP> Дуже важливий атрибут name="Ім'я карти". Присвоювання імені мапі дає можливість використати її на певному зображенні.
Час розглянути, що саме знаходиться всередині контейнера MAP і як створити області посилань. На зображення можно створити області прямокутної, круглої та багатокутної форм. Описати їх можна тегом <AREA >Прямокутна область:
<area href="document.html" shape="rect" coords="x1,y1,x2,y2">
href="document.html" вказує на сторінку яка буде завантажена після натискання на цю область.
shape="rect" вказує на те, що область прямокутної форми.
coords="x1,y1,x2,y2" вказує на координати лівого верхнього та правого нижнього кутів.
Визначити координати необхідних точок можна за допомогою графічного редактора, наприклад Paint.
Для цього треба навести курсор на необхідну точку і записати координати, що висвітлюються в статус - рядочку.
Наприклад:
<Area href="document.html" shape="rect" coords="20,20,300,150">
Виділення круглої області
<area href="document.html" shape="circle" coords="x,y,R">
Для круглої області необхідно вказати shape="circle", координати центра кола x,y та радіус кола R.
Для визначення радіусу R в редакторі Paint необхідно навести курсор на центр кола, зафіксувати координати х,у.
Потім підвести курсор на край кола. з однаковою
координатою Y.
Різниця між координатами х1 центру і х2 краю і буде значення радіусу. R=x1-x2 при y1=y2.
Виділення багатокутної області<area href="document.html" shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,...,x1,y1">
Багатокутна область використовується для більш точного виділення складної області.
Кутів може бути скільки завгодно багато.
Дла багатокутної області треба вказати shape="poly" і координати x,y всіх кутів.
Останньою координатою має бути перша координата x,y.
Практичне завдання
- Створіть папку «Моя країна»
- В неї слід помістити файли з зображеннями карти України та обласних центрів: Києва, Дніпра, Запоріжжя, Харкова, Одеси, Львова.
- Створіть HTML документ map.html, в якому розмістіть карту України.
<img src="mapa.png" usemap="#karta">
<map name="karta"> </map> - Для визначення координат міст відкрийте зображення карти в програмі Paint.
- Для створення «гарячих» областей між тегами <map> та </map> створіть теги
<area href="київ.jpg" share="rect" coords="400,100,500,200"> та ін..
Шаблон HNML- кода
<body>
<center>
<h1>Карта України</h1>
<h2>Міста України</h2>
<img src="mapa.png" usemap="#karta">
<map name="karta">
<area href="дніпро2.jpg" share="rect" coords="600,250,650,300">
....додати інші області.........................
</map>
</body>
Як прозвітувати?
1. Всі матеріали, які стосуються веб-сторінки, збережіть у папці "Карта посилань"2. Зробіть архів папки "Карта посилань"
3. Розмістить архів на вашому Google-диску і відкрийте до нього доступ
4. Надішліть посилання на вашу роботу на електронні адреси:
іnformatika18@ukr.net (Людмила Миколаївна) та
lgskuratovska@gmail.com(Людмила Григорівна)
Комментариев нет:
Отправить комментарий