Купа тексту і всякого вмісту, або нічого
<map name="karta2">
<area href="drugoy_document2.html" shape="circle" coords="46,48,35" alt="маленький круг">
</map>
Ось ми, нарешті, добралися і до багатокутників.
Насправді тут немає нічого страшного. Ви вказуєте крапки (координати кутів), вони як би з'єднуються між собою лініями, і ми можемо таким чином отримати дуже всілякі фігури (поглянете на фігуру 2, правда здорово?). Використовуючи poly, ми можемо робити найрізноманітніші області, від скромного трикутника до шикарної зірки.
Зараз ми працюватимемо з фігурою №2, тому що у неї менше кутів (так, ледача я, вирішила полегшити собі життя на один кут:).
Спершу задамо типа області:
<map>
<areashape="poly">
</map>
Координати пишуться за наступним принципом:
<area shape="poly" coords="x1,y1,x2,y2...,xN,yN">
Розшифровується це так: "координати першого кута (x1,y1), координати другого кута (x2,y2), ще багато кутів і їх координат (...), координати останнього кута (xN,yN)". Тобто для нашого п'ятикутника запис повністю виглядатиме так:
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5">
Тепер підставимо реальні значення координат в наш код:
<map>
<area shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>
Далі вже прописуємо заслання, ім'я карти, і прив'язуємо карту до малюнка (це скрізь поодинці і тому ж принципу):
<img src="mappoly.gif" usemap="#karta3">
1 - Ми можемо одночасно використовувати різні області, наприклад круг і багатокутник:
<img src="mappoly.gif" usemap="#karta3">
... Купа тексту і всякого вмісту, або нічого...
<map name="karta3">
<area href="drugoy_document3.html" shape="circle" coords="46,48,35">
<area href="drugoy_document3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>
2 - Наші області можуть перетинатися (буває, руки криві). Це не смертельно, головне пам'ятати, що в цьому випадку при натисненні на область пересічення пріоритет має область, яка вказана першою (тобто відвідувач піде на ту сторінку, куди вона посилається).
3 - Будьте уважні, якщо ви пропишіть для картинки usemap=#KARTA, а ім'я (name) вашої карти буде karta - те можливі помилки, оскільки karta і KARTA - різні імена. Регістр завжди враховується, не забувайте.
4 - Ви можете не мучитися з картами, а знайти на просторах інтернету спеціальну програму, за допомогою якої ви без зусиль зможете карту розкреслити, і не прописувати все уручну - це може заощадити ваш час, сили, нерви.
У цій главі ми продовжимо розмову про заслання. Інколи виникає така ситуація: нам потрібно зробити заслання не на інший документ, а усередині того ж документа - закладку, в народі звану якорем (дивитеся приклад <file:///D:\Documents%20and%20Settings\user\ Мої%20документи\alex%20new\ НТУУ\ Прочие\steps\ancorpri.html>, понажимайте там на ссылочки). Така навігація усередині одного і того ж документа вельми зручна. Створюватися вона може двома способами.
Спосіб перший - за допомогою атрибуту name (ім'я закладки) тега A:
<H2>Григорий Остер, "Шкідливі поради.<BR>
Книга для неслухняних дітей і їх батьків".</H2>
<A href="#stih1">Ссылка на вірш первый</A><BR>
<A href="#stih2">Ссылка на вірш второй</A><BR>
<A href="#stih3">Ссылка на вірш третий</A><BR><BR>
<PRE>
Недавно вчені відкрили, що на світі бувають неслухняні діти, яких всі роблять навпаки. Їм дають корисну пораду: "Умивайтеся вранці" - вони беруть і не умиваються. Їм говорять: "Вітайтеся один з одним" - вони тут же починають не вітатися. Учені придумали, що таким дітям потрібно давати не корисні, а шкідливі поради. Вони всі зроблять навпаки, і вийде якраз правильно.
</PRE>
<H3><A name="stih1">Стих первый</A></H3>
<PRE>... тра-ля-ля 1...</PRE>
<H3><A name="stih2">Стих второй</A></H3>
<PRE>... тра-ля-ля 2...</PRE>
<H3><A name="stih3">Стих третий</A></H3>
<PRE>... тра-ля-ля 3...</PRE>
Заголовки (стих перший, стих другий, стих третій) в нашому прикладі ми зробили закладками, використавши атрибут тега A - name:
<A name="stih3">Стих третий</A>
Потім, без ніяковості, ми зробили на них заслання:
<A href="#stih3">Ссылка на вірш третий</A>
Відмітьте - <A href="#stih3"> - символ грат (#) перед ім'ям закладки, на яку ми посилаємося, обов'язковий. Ви можете посилатися на закладку і з інших документів, тоді заслання виглядатиме таким чином:
<A href="ancorpri.html#stih3">
Заслання на вірш третій з якогось іншого документа </A> або
<A href="http://www.mysite.ru/ancorpri.html#stih1"> Заслання на вірш третій з якогось іншого документа </A>
(ім'я сайту, ім'я документа + ім'я закладки)
Спосіб другої - є такий атрибут - id, який призначає тегу (елементу) унікальне ім'я в межах одного документа (окрім тегів Base, Head, Html, Meta, Script, Style, Title). Що заважає нам задати id, наприклад, тегу H3 (заголовкам)? Нічого.
<H2>Григорий Остер, "Шкідливі поради.<BR>
Книга для неслухняних дітей і їх батьків".</H2>
<A href="#stih1">Ссылка на вірш первый</A><BR>
<A href="#stih2">Ссылка на вірш второй</A><BR>
<A href="#stih3">Ссылка на вірш третий</A><BR><BR>
<PRE>
Недавно вчені відкрили, що на світі бувають неслухняні діти, яких всі роблять навпаки. Їм дають корисну пораду: "Умивайтеся вранці" - вони беруть і не умиваються. Їм говорять: "Вітайтеся один з одним" - вони тут же починають не вітатися. Учені придумали, що таким дітям потрібно давати не корисні, а шкідливі поради. Вони всі зроблять навпаки, і вийде якраз правильно.
</PRE>
<H3 id="stih1">Стих первый</H3>
<PRE>... тра-ля-ля 1...</PRE>
<H3 id="stih2">Стих второй</H3>
<PRE>... тра-ля-ля 2...</PRE>
<H3 id="stih3">Стих третий</H3>
<PRE>... тра-ля-ля 3...</PRE>
Поглянете, зовні нічого не змінилося і все діє так само, як і у першому прикладі, тому ви можете використовувати спокійно будь-який з цих двох способів (який більше подобається).
Також хочу вас застерегти, ніколи не робіть так:
<A href="#stih">Ссылка на ...</A><BR>
<A name="STIH">Закладка</A>
Якщо ви, наприклад, напишіть ім'я закладки великими буквами, а, посилаючись, вкажете це ім'я маленькими, то броузер може порахувати це за два різні імена (а може і за одне), тому щоб уникнути помилок враховуйте це, і пишіть імена в одному регістрі.