Raphaël - це потужна бібліотека, яка повинна спростити роботу з векторною графікою в Інтернеті. Сьогодні я навчу вас, як створити інтерактивну карту з нуля.
Для початку, будь ласка, створіть таку структуру папок і файлів:
Raphaël (raphael.js)
Це файл, в якому ми будемо зберігати контури і назви кожної країни.
index.html
Як завжди, першим кроком буде створення розмітки HTML.
Ми також вставляємо стилі (default.css) і перед закриттям тега включаємо бібліотеку jQuery. бібліотеку Raphaël. paths.js і init.js.
Створення контурів з файлу SVG
SVG (Scalable Vector Graphics, масштабована векторна графіка) це сімейство специфікацій заснованої на форматі XML для опису двовимірної векторної графіки.
Відкриваємо paths.js і створюємо новий об'єкт з ім'ям paths.
Потім відкрийте SVG-файл з картою і ви побачите багато коду XML. На щастя, вам потрібно тільки одне значення d. Подивіться на зображення нижче.
Давайте створимо перший контур країни. У SVG-файлі, який я використав в цьому уроці, першої йде Ісландія, тому скопіюйте значення d і створіть новий параметр iceland в об'єкті paths.
Таким же чином додаються й інші контури.
Створення карти (init.js)
У цій частині уроку я збираюся написати скрипт, який буде показувати карту на екрані.
В першу чергу створимо подія hover.
Далі додамо подія click.
І обробник для кнопки «закрити».
Остаточно init.js виглядає так:
default.css
Останній крок полягає в додаванні деякого стилю за допомогою CSS.
2. Для вставки коду використовуйте спеціальні теги [code lang = "php"] ваш код [/ code]
У чому ваше запитання? Карта створюється за допомогою Adobe Illustrator. У своїй практиці настворювала досить карт і географічних і карт тіла людини на основі даного методу.
Я дивуюся скільки вчителів развелос, на копіювали один і той же урок і радіють, самі то побували створити карту, а то всюди одна і та ж фраза "Я знайшов в Інтернеті безкоштовний файл SVG з картою Європи" хоча б один свій фал запропонував і технологію по його створенню.
WordPress Digest
Дайджест новин зі світу WordPress