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

— Add- On do WorldWideScripts.net

Subskrybuj nasz kanał aby być na bieżąco!

Nowy! Dołącz do nas, jak chcesz!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Jest to odwzorowanie html obraz przeznaczony dla programistów.

Narzędzie zostało opracowane przy użyciu płótna HTML5, więc jego stosowanie jest ograniczone do przeglądarek, które wspierają płótno, ale również File API:

IE10 +, FF3.6 +, FF14-, FF18 symbol + (FF15 mają problemy z niektórych funkcjonalności płótnie, Bug 787623, które zostaną rozwiązane w FF18), Chrome6 +, Safari6 +, Opera11.1 +

Ponieważ jest to narzędzie dla programistów, myślę, że to nie jest duży ograniczenie, bo przypuszczam, że web developer nie ma problemu, aby wybrać odpowiednią przeglądarkę.

Użyłem FF14 opracować narzędzie, więc jest to najlepszy wyborem, ale narzędzie zostało przetestowane także w Chrome22 i Opera12


Uwaga: wersja narzędzia, które można zobaczyć w linku Podgląd obrazu na żywo, jest ograniczona wersja narzędzia. W tej wersji można załadować tylko określony zestaw obrazów, wymienione na stronie głównej. Po załadowaniu obrazu można wyciągnąć wszystkie kształty, ale tylko pierwsze 6 kształty będą generowane w kodzie HTML. Ograniczenie to nie przeszkadza, aby przetestować wszystkie funkcje narzędzia.


Co to jest obraz mapy?

Mapa obrazu jest kod HTML, który sprawia użytkownika klikalne różnych obszarów obrazu. Kod HTML, który składa się z map tagu HTML, w połączeniu z tagiem obszaru, który pozwala na określenie obszarów, z prostokątnymi, wielokątnych i okrągłych kształtach.
Na przykład, jeśli masz obraz image1.png w stronie HTML, można napisać następujący kod:

 <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> 

Jak widać, trzeba ustawić atrybut Usemap w tagu img, które mają taką samą wartość atrybutu name w tagu mapy. Pomiędzy <map> i </ map> można zdefiniować dowolną liczbę tagów <> w obszarze, jak chcesz, z których każda reprezentuje obszar klikalny użytkownika na związane obrazu. Każdy obszar musi mieć atrybut kształt, który może mieć jedną z 3 wartości: rect, poli i kołowymi. Kształt rect jest całkowicie określony przez 2 punkty, poli kształt jest zdefiniowany przez sekwencję punktów i kształt okręgu jest zdefiniowane przez punkt, który stanowi centrum i promieniu. Wszystkie punkty są zdefiniowane przez parę współrzędnych, wyrażoną w pikselach, krewni lewym górnym rogu obrazu. Atrybut kształt może mieć również wartość "default", które odnoszą się do tych części obrazu nie odwzorowanych z którymkolwiek z poprzednich kształtów. Weź pod uwagę, a nie, że kolejność, w których kształty są zdefiniowane w mapie są bardzo ważne: jeśli określenie "default" kształt jak pierwszy kształt na mapie, zastępuje wszystkie kolejne kształty, ponieważ "default" Kształt odnosi się do całego obrazu. Jest to prawdą również w kształtach, które nakładają się na siebie: można zdefiniować trochę kształt w większej formie, ale musisz zdefiniować najpierw trochę kształt i wtedy większy. Jeżeli 2 kształty udostępnić część obrazu, kształt zdefiniowany pierwszy, wygrywa.

Jeśli chcesz ustawić ręcznie mapę obrazu trzeba znać współrzędne wszystkich punktów potrzebnych do zdefiniowania różnych kształtów. Prawdopodobnie nie jest to duży problem, jeśli masz kilka obszarów na mapę, zwłaszcza jeśli mają okrągłe lub prostokątne obszary. Ale jeśli masz kilka obszarów, w kształt wielokąta, ustawić je ręcznie, nie jest to proste zadanie.

Narzędzie Obraz mapowanie pozwala na rysowanie kształtów, takich jak rect, poli i okręgu na wybranym zdjęciu, które będą automatycznie tłumaczone w analogicznym HTML kod sprawia, że obszary obrazu użytkownika klikalne.

Po rysowanie kształtów na danym obrazie, można wygenerować kod HTML, po prostu klikając na przycisk i kod zostanie displayied w textarea. Możesz skopiować kod HTML i używać go w swoją stronę (s) HTML. Można również wykonać proces odwrotny: wklejenie kodu HTML w polu tekstowym, można załadować ten kod, po prostu klikając przycisk; zostanie to przetłumaczone w kształtach na obrazie i można je modyfikować, dodawać nowe kształty i ponownie wygenerować kod HTML. Ten mechanizm odwrotnego jest użyteczne, co pozwala zaoszczędzić częściowy proces mapowania i nadal odwzorować obraz później. Jest on również przydatny do udoskonalenia "ręcznie" kształt Projektowanie / pozycjonowanie: po wygenerowaniu kodu w polu tekstowym, które można modyfikować współrzędne w polu tekstowym w locie i ponownie załadować.

Główne cechy:

  • Możesz wybrać obraz lokalnego lub zdalnego
  • Można ustawić rozmiary docelowego obrazu: są to rozmiary, że obraz będzie miał na swojej stronie HTML
  • Możesz powiększać i pomniejszać obraz w każdej chwili i nie będzie to kolidować z rzeczywistych współrzędnych, który będzie generowany, która zależy tylko od wielkości docelowych obrazu. Funkcja zoom jest przydatna tylko pomóc narysować kształty.
  • Można ustawić kilka parametrów dla każdego kształtu, takie jak "href" atrybutu, atrybut "alt", "ID" i "klasy" atrybutów i wreszcie atrybutu "docelowej". Aby ustawić parametr trzeba wybrać kształt: wybierz kształt trzeba wybrać górną strzałkę w lewym pasku narzędzi, a następnie kliknij na kształt.
  • Możesz ustawić kilka parametrów na mapie: Mapa "imię", domyślny adres URL i cel.
  • Można narysować kształt wybór kształtu z paska narzędzi.
  • Aby narysować kształt, po wybraniu go z paska narzędzi, możesz po prostu kliknąć lewym przyciskiem myszy na obrazie, w którym chcesz rozpocząć rysowanie kształtu.
  • Jeśli kształt jest koło, punkt firts jest centrum: poruszanie myszą (kliknięciu lub zwolniony), można zobaczyć kółko, że zgodnie z kursorem. Ponowne kliknięcie myszy zatrzyma rysowanie okręgu.
  • Jeśli kształt jest rect. pierwszy punkt jest jednym z rogu. Przesuwanie myszy (kliknięciu lub zwolniony) będzie narysować rect. Ponowne kliknięcie myszy zatrzyma rysunek.
  • Jeśli kształt jest poli proces jest nieco inna: każde kliknięcie myszki zostanie ustawiony punkt; obecny punkt jest zawsze związana z jodły jednego, czyniąc poli zawsze zamknięty kształt; zatrzymać zwrócić poli (aby ustawić ostatni punkt), musisz dwukrotnie kliknąć myszką.
  • Dla wszystkich kształtach można również zatrzymać zwrócić je klikając przycisk "stop" (lewy górny strzałki na pasku narzędzi).
  • Możesz zobaczyć położenia myszy podczas przesuwania go na obrazie.
  • Możesz użyć granicę szary-przerywana wokół obrazu w celu określenia współrzędnych krawędzi obrazu, dzięki czemu można korzystać z granicy, jak to było częścią obrazu: tak, możesz kliknąć na granicy podczas rysowania kształtu, jus w nim był częścią obrazu. Na przykład, jeśli klikniesz na lewym górnym rogu granicy, można ustawić punkt na (0, 0) koordynuje. Jeśli klikniesz lewej granicy, w dowolnym momencie, można ustawić punkt w (0, y) koordynuje, itp
  • Możesz wybrać już narysowany kształt i zmodyfikować / rozmiaru / usuń go. Aby ją usunąć należy użyć "gumy" w pasku narzędzi, który pojawi się jako odrzucił ołówek wybierając tylko kształt.
  • Możesz wybrać kolor obrysu kształtów z zestawem 5 kolorach (nie jest to narzędzie do projektowania, więc mają ograniczoną liczbę kolorów, a także nie można wybrać inny kolor dla każdego kształtu).
  • Możesz kliknąć na przycisk "Mapa", które jest widoczne tylko po wybraniu przycisku "stop" na pasku narzędzi, a nie kształt jest wybrany: jeśli masz jakieś kształty narysowane na zdjęcie pojawi się kod HTML w textarea, jeśli nie zostały jeszcze wyciągnąć kształt widać pusty textarea, ale można w nim jakąś przeszłość kodu HTML i załadować go.
  • Klikając na przycisk "Load" (które można zobaczyć tylko po kliknięciu na przycisk "Mapa"), obecny kod HTML w polu tekstowym zostanie przetłumaczony w kształty na obrazie.

Możesz zapoznać się z pełną instrukcją narzędzia pod następującym adresem: Instrukcja online

Jeśli masz jakiekolwiek pytania, po prostu zostawić komentarz lub napisz do mnie e-maila!


Pobierz
Inne akcesoria w tej kategoriiWszystkie składniki tego autora
KomentarzeNajczęściej zadawane pytania i odpowiedzi

Właściwości

Utworzono:
10 października 12

Ostatnia aktualizacja:
N / A

Wysoka rozdzielczość:
Żaden

Zgodne przeglądarki:
Firefox, Opera, Google Chrome

Pliki wliczony:
JavaScript JS, HTML, CSS

Wersja oprogramowania:
HTML5

Słowa kluczowe

eCommerce, eCommerce, Wszystkie przedmioty, aplikacja, obszar, płó, tno, krąg, koordynować, html5, obraz, mapa, mapper, poli, rect, kształt, Cel, narzędzie, zoom