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, изображение, карта, картопостроитель, поли, прямоугольник, форма, цель, инструмент, зум