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

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

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

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

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

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>

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

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

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

Пам’ятаєте блог про Хелоуїн, в якому можна було «гуляти» картинками, шукаючи приховані сторінки?

Такі інтерактивні картинки називаються графічними мапами і  зробити їх може кожна людина, що хоч трохи знайома з HTML’ом. Часу це займе більше за редагування та вставляння до замітки простого зображення, але скільки цікавих речей можна втілити в життя за допомогою графічних мап!

Тема графічних мап достатньо довга; тож я розбила її на два уроки. Сьогодні займемося теорією та підготовкою робочого матеріалу. Давайте поміркуємо, де саме нам прийдуть на допомогу графічні мапи?

 

  1. Мапа – вона і є мапа. Якщо вам колись хотілося виставити в блозі мапу власного міста на якій можна було б віднайти, де ви живете; де працюєте; де купуєте найсвіжіший хліб і т.д., це можна зробити за допомогою однієї єдиної інтерактивної картинки.
  2. У вас є спільні фото вашої сім’ї, друзів, співробітників і про кожного з них ви бажаєте написати щось окремо. З такого фото можна зробити графічну мапу – до кожної людини на фото буде прив’язана окрема сторінка.
  3. За допомогою мапи можна створювати чудові графічні меню з прихованими лінками.
  4. Оригінальні листівки на свята.
  5. Міні-ігри.

 

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

 

Оберіть зображення

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

 

Координати

Обираючи для публікування картинку, я зазвичай використовую графічний редактор щоб підігнати до потрібних її розміри, кольорову гаму і т. д. Для графічної мапи потрібно знати координати майбутніх активних точок на картинці. Відкрийте картинку в звичайному Пейнті (Windows) поводіть по зображенню мишею, слідкуючи за правим кутом рядка стану (status bar) програми. В ньому будуть змінюватися координати вказівника миші, їх потрібно буде записати, але це потім. Спочатку дізнаємося, якими можуть бути…

Активні точки

Активні точки (місця на картинці, що переводитимуть користувачів на інші сторінки) можуть бути трьох типів:

-RECT – прямокутна форма. Для прямокутної активної точки потрібні 2 різні координати. Координати верхнього правого кута і лівого нижнього кута активного прямокутника.

-Circle – форма кола. Знадобиться координата середини кола та його радіус в пікселях. Пам’ятаєте, що радіус – це половина діаметру? Саме цю форму я найбільше використовувала при створенні блога до Хелоуїну 🙂

 

-POLYGON – довільна форма. Її використовують частіше за все, але і мороки вона приносить найбільше. Уявіть, що на вашій картинці активними мають бути зірки або трикутники. І ви знаходите координати всіх потрібних точок форми трикутника (три координати) чи  п’ятикутної зірки (5 або 10 координат в залежності від деталізації). Чесно кажучи, я б для зірки використала коло а для трикутника – прямокутну форму (звичайно, якщо проект дозволяє).

Будемо вважати, що привід для використання графічної мапи ви знайшли, картинки підготували, всі потрібні координати записали. Тепер настає черга заповнення сторінок, на які переводитиме графічна мапа. Звичайно, чим більше активних точок на мапі, тим більше матеріалу вам потрібно підготувати 🙂 Тож сьогоднішнє домашнє завдання полягає в розробці плану графічної мапи і наповненню сторінок до неї.

Бажаю успіху!