Створюємо клікабельно карту за допомогою adobe fireworks

C допомогою інструменту Чарівна паличка (W). виділяємо один з районів на карті:

Створюємо клікабельно карту за допомогою adobe fireworks

Копіюємо виділений район на новий шар:

Створюємо клікабельно карту за допомогою adobe fireworks

Вибираємо інструмент Покажчик і в панелі Властивості. додаємо для шару фільтр Живі ефекти Photoshop:

Створюємо клікабельно карту за допомогою adobe fireworks

Ефекти можна вибрати будь-які, наприклад Тінь + Накладення кольору + Обводка:

Створюємо клікабельно карту за допомогою adobe fireworks

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

Аналогічно робимо з іншими районами:

Створюємо клікабельно карту за допомогою adobe fireworks

В панелі Стану. натискаємо правою кнопкою по першому стану і вибираємо пункт Створити дублікат стану:

Створюємо клікабельно карту за допомогою adobe fireworks

У діалоговому вікні, в полі Номер вказуємо 4 (стільки у нас районів). В результаті маємо отримати 5 станів (1 основне + 4 райони):

Створюємо клікабельно карту за допомогою adobe fireworks

Стану можна перейменовувати по подвійному кліку на них.

Вибираємо перший стан і в панелі Шари залишаємо видимими тільки шар з картою:

Створюємо клікабельно карту за допомогою adobe fireworks

Далі вибираємо другий стан Район 1 при наведенні і в панелі Шари залишаємо видимими тільки шар з районом 1 і шар з картою:

Створюємо клікабельно карту за допомогою adobe fireworks

Аналогічно робимо з трьома наступними станами: у Район 2 при наведенні залишаємо видимими тільки Район 2 і Карта. у Район 3 при наведенні - Район 3 і Карта. у Район 4 при наведенні - Район 4 і Карта:

В панелі Шари вибираємо шар Карта і йдемо в меню Редагування → Вставити → Прямокутний фрагмент (або Alt + Shift + U):

Створюємо клікабельно карту за допомогою adobe fireworks

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

Створюємо клікабельно карту за допомогою adobe fireworks

Створюємо клікабельно карту за допомогою adobe fireworks

Тепер, клікнувши на іконку в центрі першої активної області, вибираємо пункт Додати поведінку "Обмін зображеннями":

Створюємо клікабельно карту за допомогою adobe fireworks

У діалоговому вікні вибираємо єдиний фрагмент і стан Район 1 при наведенні (2):

Створюємо клікабельно карту за допомогою adobe fireworks

Аналогічно робимо з трьома іншими активними областями, змінюючи поле Стан № на відповідний стан.

У результаті повинно вийти наступне:

Створюємо клікабельно карту за допомогою adobe fireworks

Вибравши закладку 2 варіанти в верху документа, можна "помацати" робочий варіант карти:

Створюємо клікабельно карту за допомогою adobe fireworks

Залишилося згенерувати HTML код карти - меню Файл → Експорт:

Створюємо клікабельно карту за допомогою adobe fireworks

Написане актуально для Adobe Fireworks CS5 Схожі записи

Створюємо клікабельно карту за допомогою adobe fireworks

Створюємо клікабельно карту за допомогою adobe fireworks

Створюємо клікабельно карту за допомогою adobe fireworks

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

Ніяк не збагну в чому справа. Зовні схоже на те що js відпрацьовується. Хто може проконсультувати? Моя аська 292 116 371

Створюємо клікабельно карту за допомогою adobe fireworks

Велике дякую! Дуже допомогло!

Створюємо клікабельно карту за допомогою adobe fireworks

Створюємо клікабельно карту за допомогою adobe fireworks

Пробую зробити все за інструкцією. Запнувся на пункті, в якому кожному станом присвоюються видимі шари.
Обираю стан, тикаю в кнопку "Шари" поряд з кнопкою "Стану", роблю видимими необхідні шари. Потім переходжу назад в стану, вибираю наступне, переходжу в шари, міняю видимі шари, а в результаті змінюється видимість і в раніше створених станах.
Що роблю не так?

Створюємо клікабельно карту за допомогою adobe fireworks

Розібрався, надає в папці "Фон" шари створював, а треба було в "Шар 1".

Створюємо клікабельно карту за допомогою adobe fireworks

Створюємо клікабельно карту за допомогою adobe fireworks

А як отриманий код з зображеннями найбільш просто встановити в статичну сторінку DRUPAL?

Створюємо клікабельно карту за допомогою adobe fireworks

Дякую за урок.
Було-б здорово, якщо уроків для Fireworks було-б більше

Створюємо клікабельно карту за допомогою adobe fireworks

Дякуємо. Урок у нагоді.
Проблема виникла при перенесенні розмітки на сторінку сайту. Чи не з'являється жодна з картинок! Як правильно перенести картинки?

Створюємо клікабельно карту за допомогою adobe fireworks

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

Створюємо клікабельно карту за допомогою adobe fireworks

Як зробити щоб на локальному комп'ютері все це працювало? без інтернету

Створюємо клікабельно карту за допомогою adobe fireworks

шляхи прописуйте повні і на локалке потрібно ставити openserver наприклад!

Створюємо клікабельно карту за допомогою adobe fireworks

Створюємо клікабельно карту за допомогою adobe fireworks

Фігово що в chrome при натисканні висвічується жовта дріт.

Створюємо клікабельно карту за допомогою adobe fireworks

Дякую за цінний урок! Все коротко і ясно! Ви дуже добре пояснюєте. Ще раз дякую! не знаю інших але Ви мене конкретно виручили)
в chrome при натисканні висвічується жовта дріт хто небудь знає як її прибрати?

Створюємо клікабельно карту за допомогою adobe fireworks

Створюємо клікабельно карту за допомогою adobe fireworks

Створюємо клікабельно карту за допомогою adobe fireworks

Створюємо клікабельно карту за допомогою adobe fireworks

Перше що бентежить - це те що активну область не як не намагалися навіть імпортувати з виділення - що за маячня обводити то що вже обведено. Зараз бюсь над цим
Друге то що імпортується кілька картинок при імпорті - прошу створити кілька маленьких і зробити їм абсалютно позиціонування і відображати при Ховер на аера.

Створюємо клікабельно карту за допомогою adobe fireworks

Хлопців, допоможіть розібратися з станами. Як їх потрібно вибирати, щоб FW зрозумів що це не просто клік, а прив'язка до конкретного стану шарів? У мене все згенеровані зображення мають єдиний вид.

Створюємо клікабельно карту за допомогою adobe fireworks

Створюємо клікабельно карту за допомогою adobe fireworks

Чи є можливість змінювати картинки не при наведенні, а при кліці миші?