WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

HTML5 canvas Image Mapper

— Додатки до WorldWideScripts.net

Підпишіться на наш канал, щоб залишатися в курсі подій!

Новинка! Слідуйте за нами, як ви хочете!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Це відображення HTML зображення призначений для веб-розробників.

Інструмент був розроблений з використанням HTML5 полотно, так що його використання обмежується браузерах, які підтримують полотно, але і API файлу:

IE10 + FF3.6 + FF14-, FF18 + (The FF15 є проблеми з деякими функціональними полотно, Буг 787623, які будуть вирішені в FF18), Chrome6 + Safari6 + Opera11.1 +

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

Я використовував FF14 розвивати інструмент, так що це найкращий вибір, але інструмент був протестований і в Chrome22 і Opera12


Примітка: версія інструменту, який ви можете побачити на засланні Жива попереднього перегляду, є обмеженою версією інструменту. У цій версії ви можете завантажити тільки певний набір образів, вказаний на головній сторінці. Після завантаження зображення можна намалювати всі фігури, але тільки перші 6 форми буде створений в HTML код. Це обмеження не заважає вам перевірити всі функціональні можливості інструменту.


Що таке зображення карти?

Карта зображення є HTML-код, який робить користувальницькі кліки різні області зображення. HTML-код складається з HTML тега карті, в поєднанні з площею тега, який дозволяє визначити області з прямокутними, багатокутними та круглих форм.
Як приклад, якщо у вас є image1.png зображення на вашій сторінці HTML, ви можете написати наступний код:

 <img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" /> <map name="image1map"> <area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1"> <area shape="poly" coords="108, 145, 174, 71, 205, 139, 153, 192" href="area2.html" alt="area2"> <area shape="circle" coords="124,58,8" href="area3.html" alt="area3"> <area shape="default" href="http://default.html" alt = "the whole image"/> </map> 

Як ви бачите, ви повинні встановити usemap атрибут в тезі IMG, які матимуть те ж значення імені атрибута в тезі карті. Між <мапі> і </ MAP> Ви можете визначити, як багато <область> теги, як ви хочете, кожен з яких представляє користувальницький активна область на відповідному зображенні. Кожна область повинна мати атрибут форми, які можуть мати один з 3 значень: прямокутник, коло та полі. Форма прямокутник повністю визначається на 2 пункти, полі форма визначається послідовністю точок і коло форма визначається точкою, яка представляє центр і радіус. Всі точки визначаються пари координат, в пікселях, родичі до лівому верхньому куті зображення. Атрибут форма може також мати значення "за замовчуванням", які відносяться до частини зображення, що не відображених з будь-яким з попередніх форм. Візьміть до уваги, натомість, що порядок, в якому фігури визначені в карті дуже важливо: якщо ви визначити форму "за замовчуванням" в якості першої форми в карті, воно буде скасовувати всі наступні форми, бо "за замовчуванням" Форма відноситься до всього зображення. Це вірно також з формами, які перекривають один одного: ви можете визначити трохи форму у велику форму, але ви повинні спочатку визначити мало форму, і потім більшу. Якщо 2 форми поділяють частину зображення, форма визначається першою, перемагає.

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

Інструмент Image Mapper дозволяє малювати фігури, такі як прямокутник, полі, і коло на вибраному зображенні, який буде переведені автоматично у відповідному HTML код, який робить ділянки зображення користувача інтерактивні.

Після малювання фігур на даному зображенні, ви можете генерувати HTML код, просто натиснувши на кнопку, і код буде displayied в текстовій. Ви можете скопіювати HTML код і використовувати його в сторінку (и) HTML. Ви також можете зробити зворотний процес: вставки HTML код в текстове поле, ви можете завантажити цей код, просто натиснувши кнопку; це буде переведена у форми на зображенні, і ви можете змінювати їх, додавати нові форми і повторно генерувати HTML-код. Цей зворотний механізм корисно дозволить вам заощадити частковий процес відображення і продовжувати карту зображення пізніше. Це також корисно для уточнення "вручну" форма проектування / позиціонування: після генерації коду в текстове поле, ви можете змінити координати в текстовій на льоту і повторно завантажити його.

Основні риси:

  • Ви можете вибрати локальний або віддалений файл
  • Ви можете встановити розміри цільового зображення: ці розміри, що зображення буде мати на вашій сторінці HTML
  • Ви можете збільшувати і зменшувати масштаб зображення в будь-який момент, і це не буде заважати з реальними координатами, які будуть створені, що залежить тільки від цільових розмірів зображення. Функція масштабування корисна тільки, щоб допомогти вам зробити форми.
  • Ви можете встановити декілька параметрів для кожної форми, такі як "HREF" атрибут, атрибут "Alt", "ID" і "клас" Атрибути і атрибуту, нарешті, "цільової". Щоб встановити параметр, ви повинні вибрати форму: вибрати форму, ви повинні вибрати стрілку зверху ліворуч на панелі інструментів, а потім натисніть на форму.
  • Ви можете встановити деякі параметри для карти: карти "ім'я", URL за замовчуванням і мета.
  • Ви можете намалювати фігуру вибравши форму з панелі інструментів.
  • Щоб намалювати фігуру, після вибору його з панелі інструментів, ви можете просто клацнути мишею на зображенні, де ви хочете, щоб почати форму.
  • Якщо форма являє собою коло, точка фліртує є центром: переміщення миші (або клацнути відпущена), ви можете побачити, що коло слідувати курсором. Повторне натискання миші перестане малювати коло.
  • Якщо форма є прямокутник. перша точка є одним з кута. Переміщення миші (або клацнути відпущена) буде малювати прямокутник. Повторне натискання миші буде припинити малювати.
  • Якщо форма являє собою поли процес трохи відрізняється: кожен клацаннямиші буде встановити точку; поточна точка завжди пов'язана з ялин один, що робить поли завжди замкнуту фігуру; припинити малювати полі (встановити останню крапку), ви повинні двічі клацніть мишею.
  • Для всіх форм ви можете зупинитися, щоб залучити їх, натиснувши на кнопку «стоп» (стрілка зверху зліва на панелі інструментів).
  • Ви можете побачити координати миші при переміщенні його на зображенні.
  • Ви можете використовувати сіро-пунктирна рамка навколо зображення, щоб визначити краю координати зображення, так що ви можете використовувати кордон, як це було частиною образу: так, ви можете натиснути на кордоні під час малювання форми, JUS як це була частиною зображення. Наприклад, якщо ви натиснете на верхньому лівому кутку кордону, ви встановите точку в (0, 0) координати. Якщо ви клацніть лівою кнопкою кордон, в будь-якій точці, ви встановите точку в (0, у) координати, і т.д.
  • Ви можете вибрати вже звертається форму і змінити / розмір / видалити його. Щоб видалити його, ви повинні використовувати "каучук" в панелі інструментів, який буде відображатися в якості відхилив олівець тільки вибравши форму.
  • Ви можете вибрати колір контуру фігур з набору 5 квітів (це не засіб проектування, так що я обмежив число кольору, а також ви не можете вибрати інший колір для кожної форми).
  • Ви можете натиснути на кнопку "Карта", що видно тільки тоді, коли ви натиснете на кнопку "Стоп" на панелі інструментів і не обрана форма: якщо у вас є якісь фігури, намальовані на зображенні ви побачите HTML код в текстове поле, якщо ви ще не намалював форму ви побачите порожню текстову, але ви можете пройти до нього деякі HTML код і завантажити його.
  • При натисканні на кнопку "Завантажити" (що можна бачити тільки після натискання на кнопку "Карта"), то HTML-код присутній в текстовій будуть переведені у форми на зображенні.

Ви можете звернутися до повного керівництву інструменту за посиланням: інтерактивне керівництво

Якщо у вас є які-небудь питання, просто залиште свій коментар або напишіть мені листа!


Завантажити
Інші компоненти в цій категоріїВсі компоненти цього автора
КоментаріЧасті питання та відповіді

Властивості

Створений:
10 жовтня 12

Останнє оновлення:
N / A

Висока роздільна здатність:
Немає

Сумісні Браузери:
Firefox, Opera, Chrome

Файли, включені:
JavaScript JS, HTML, CSS

Версія:
HTML5

Ключові слова

електронної комерції, електронної комерції, Всі товари, додаток, площа, полотно, коло, координувати, HTML5, зображення, карта, картопостроітель, поли, прямокутник, форма, мета, інструмент, зум