Графічні мапи, практика

Якщо ви виконали домашнє завдання з попереднього уроку, можете починати розраховувати координати графічної мапи для відібраної картинки.

Вигадаємо мапі ім’я

Як будь-який документ, вулиця або місто, графічна мапа потребує власної назви. Уявіть, що на одній сторінці ви розміщуєте декілька мап – браузеру якось потрібно їх розрізняти 🙂

Тож для початку вигадаємо мапі (або мапам) ім’я:

1 мапа: <IMG SRC="адреса малюнка" USEMAP="#назва мапи">
2 мапа: <IMG SRC="адреса малюнка" USEMAP="#назва мапи">

В готовому вигляді цей клаптик коду буде таким:
1 мапа: <IMG SRC="cats.jpg" USEMAP="#cats">
2 мапа: <IMG SRC="dogs.jpg" USEMAP="#dogs">

Тепер можна писати текст замітки, а між текстом в потрібних місцях розташувати потрібні мапи:
 <map name="cats">
[.... тут будуть знаходитися координати, про які розповідатиму далі ....]
</map>
 <map name="dogs">
[...тут будуть знаходитися координати, про які розповідатиму далі...]

</map>

Приділіть особливу увагу тому, що у графічних мап є закриваючі теги: </map> . Не забувайте їх ставити!

 

Знаходимо координати

Як шукати координати, я розповідала в теоретичній частині уроку, але без наглядних прикладів. На малюнку нижче можна побачити потрібні координати для кожної можливої форми. Для довільної форми Polygon треба притримуватися порядку запису координат (див. стрілочки на малюнку):

 

Кодуємо

Тепер, коли всі потрібні координати знайдені і занотовані, можна приступати до розміщення їх у коді:

 

<img src="посилання на малюнок, що слугує графічною мапою" usemap="#назва мапи" border="0">
<map name="назва мапи">
<area shape="форма, яку збираєтеся використовувати. Наприклад Polygon" coords="19,44,45,11,87,37,82,76,
49,98" href="
посилання, куди має переводити активна форма"></map>

Активна площина графічної мапи може переводити не тільки на іншу сторінку. Ви можете поставити на неї якір або тег  е-мейлу, файл до завантаження.

Бажаю вдалих експериментувань!

Графічні мапи, практика: 2 комментария

  1. а як зробити карту для одного зображення але з двома активними областями?

  2. roumek,

    так тут же саме про це і пишеться — як робити мапу для одного зображення 🙂

Обсуждение закрыто.