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 al WorldWideScripts.net

Abonu al nia feed resti ĝisdata!

Nova! Sekvu nin kiel vi deziras gxin!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Tiu estas html bildo mapado desegnita por ttt programistoj.

La ilo estis evoluigita uzante la HTML5 tolo, tiel ĝia uzo estas limigita al la foliumiloj kiuj subtenas la tolo, sed ankaŭ la Arkivo API:

IE10 +, FF3.6 +, FF14-, FF18 + (la FF15 havas problemojn kun iuj funcionalidades kanvaso, Insekto 787623, kiu estos solvitaj en FF18), Chrome6 +, Safari6 +, Opera11.1 +

Ekde ĉi tiu estas ilo por programistoj, mi pensas ke tiu ne estas granda limigo, ĉar mi supozas ke desarrollador retejo ne havas problemon elekti taŭgan retumilo.

Mi uzis FF14 evoluigi la ilon, do ĉi tiu estas la plej bona choise, sed la ilo estis testita ankaŭ en Chrome22 kaj Opera12


Notu: La versio de la ilo ke vi povas vidi en la Live Antaŭrigardo ligilo, estas limigita versio de la ilo. Kun ĉi tiu versio vi nur povas ŝarĝi specifan aron de bildoj, listigita sur la ĉefpaĝon. Post ŝarĝi bildon vi povas desegni la tutan formojn, sed nur la unuaj 6 formoj generos en la HTML-kodo. Tiu limigo ne malhelpas vin elprovi ĉiuj funcionalidades de la ilo.


Kio estas bildo mapo?

Bildo mapo estas HTML kodo kiu faras uzanto-alklakebla malsamajn areojn de bildo. La HTML kodo konsistas el la mapo HTML tag, lige kun la areo etikedo, kiu permesas difini areojn kun rektangula, plurlatera kaj cirkla formojn.
Kiel ekzemplo, se vi havas la image1.png bildo en via HTML-paĝo, vi povas skribi la sekvan kodon:

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

Kiel vi povas vidi, vi devas agordi la usemap atributo en la img etikedo, kiu havas la saman valoron de la nomo atributo en la mapo etikedo. Inter la <mapo> kaj </ mapo> vi povas difini kiel multaj <spaco> etikedoj kiel volas, ĉiu reprezentante uzanto-traktata areo sur la rilata bildo. Ĉiu areo devas havi formon atributo, kiu povas havi unu el la 3 valoroj: rect, poli kaj cirklo. La rect formo estas tute difinita per 2 poentoj, poli formo estas difinita per sekvenco de punktoj kaj cirklo formo estas difinita per punkto, kiu reprezentas la centron, kaj radiuso. Ĉiuj punktoj estas difinitaj per paro de koordinatoj, esprimitaj en pikseloj, parencoj al la supro-maldekstra angulo de la bildo. La formo atributo povas ankaŭ havi la "defaŭlta" valoro, kiu rilatas al la partoj de la bildo ne mapita al iu el la antaŭaj formoj. Enkalkuli, anstataŭe, ke la ordo en kiu la formoj estas difinita en la mapo estas tre grava: se vi difinas la "defaŭlta" formon kiel unuan formon en la mapo, ĝi anstataŭigos ĉiujn postaj formoj, ĉar la "default" formo rilatas al la tuta bildo. Ĉi tio estas vera ankaŭ kun la formoj kiuj kovras aliajn: vi povas difini iom formon en pli granda formo, sed vi devas difini la unuan malmultan formon kaj tiam la granda unu. Se 2 formoj dividas parton de la bildo, la formo difinita unua, gajnas.

Se vi volas agordi permane bildon mapo vi devi scii la koordinatoj de ĉiuj punktoj bezonis difini la malsamajn formojn. Probable tio ne estas granda problemo, se vi havas kelkajn areojn mapi, speciale se vi havas cirkla aŭ rektangula areoj. Sed se vi havas plurajn areojn, kun plurlatera formo, direktu ilin permane ne estas simpla tasko.

La bildo Mapper ilo permesas desegni formojn kiaj rect, poli, kaj cirklo sur la elektitan bildon, kiu estos tradukita aŭtomate en la responda HTML kodo kiu faras la areoj de la bildo de uzanto-traktata.

Post desegni la formojn sur la donita bildo, vi povas generi la HTML kodo simple alklakante butonon kaj la kodo estos displayied en textarea. Vi povas kopii la HTML-kodon kaj uzi ĝin en via HTML-paĝo (j). Vi povas ankaŭ fari la inversan procezon: alglui la HTML-kodon de la textarea, vi povas ŝarĝi tiu kodo simple alklakante butonon tiu estos tradukita en la formoj sur la bildon kaj vi povas modifi ilin, aldoni novajn formojn kaj re-generi la HTML kodo. Ĉi reverso mekanismo estas utila al vi permesas ŝpari parta mapado procezo kaj daŭri mapi la bildon poste. Ĝi estas ankaŭ utila por rafini "permane" la formon desegni / situado: post generante la kodo en la textarea, vi povas modifi la koordinatoj en la textarea sur la muŝo kaj re-ŝargi ĝin.

Ĉefaj karakterizaĵoj:

  • Vi povas elekti lokan aŭ malproksima bildo
  • Vi povas agordi la celo bildo grandecoj Tio estas la grandecoj kiuj la bildo havos en via HTML-paĝo
  • Vi povas zomi en kaj eksteren la bildon en ajna momento kaj ĉi tiu ne interferir kun la reala koordinatoj kiu generos, kiu dependas nur sur la cela grandecoj de la bildo. La zoom trajto estas nur utila por helpi vin desegni la formojn.
  • Vi povas agordi plurajn parametrojn por ĉiu formo, kiel la "href" atributo, la "alt" atributo, la "id" kaj "klaso" atributoj kaj fine la "celo" atributo. Por agordi la parametro vi devas elekti la formon: elekti formon vi devas elekti la supro-maldekstra sago en la ilobreto kaj tiam alklaku la formon.
  • Vi povas agordi iuj parametrojn por la mapo: la mapo "nomo", la defaŭlta url kaj la celo.
  • Vi povas desegni formon elektanta la formo de ilo breto.
  • Desegni formon, post selekti ĝin de la ilobreto, vi povas simple klaki per la muso sur la bildo, kie vi volas komenci la formon.
  • Se la formo estas cirklo, la firts punkto estas la centro: movado de la muso (aŭ klakis liberigita), vi povas vidi cirklo kiuj sekvas la kursoro. Klakante denove la muso ĉesos desegnante la cirklo.
  • Se la formo estas rect. la unua punkto estas unu el la angulo. Movante la muso (aŭ klakis liberigita) eltiros rect. Klakante denove la muso ĉesos desegnante.
  • Se la formo estas poli la procezo estas iom malsamaj: ĉiu klako de la muso starigos punkto; la nuna momento estas ĉiam ligita kun la abioj unu, farante la poli ĉiam fermitan formon; halti desegni la poli (por krei la lastan punkton) Vi devi duobligi klaki la muson.
  • Por ĉiuj formoj vi povas ankaŭ halti desegni ilin alklakante la "halti" butono (la supre-maldekstra sago en la ilobreto).
  • Vi povas vidi la muso koordinatoj kiam vi translokas ĝin sur la bildo.
  • Vi povas uzi la griza-kuregita limo ĉirkaŭ la bildo por determini la rando koordinatoj de la bildo, tial vi povas uzi la limo kiel estis parto de la bildo: jes, vi povas klaki sur la limo dum la formon desegno, jus kiel estis parto de la bildo. Ekzemple, se vi alklakas la supre-maldekstra angulo de la limo, Vi starigos punkton je (0, 0) kunordigas. Se vi klakas la maldekstra-limo, en ajna punkto, Vi starigos punkto je la (0, y) koordinatoj, ktp
  • Vi povas elekti jam tirita formo kaj modifi / resize / forigi ĝin. Forigi ĝin vi devas uzi la "kaŭĉuko" en la ilbreto, kiuj aperos kiel malakceptis krajono nur elektanta formon.
  • Vi povas elekti la koloron de la konturo de la formoj de aro de 5 koloroj (tio ne estas dezajno ilo, tiel mi limigis la nombron de koloro kaj ankaŭ vi ne povas elekti malsaman koloron por ĉiu formo).
  • Vi povas alklaki la "mapo" butonon, kiu estas videbla nur kiam vi elektas la "halti" butonon sur la ilobreto kaj neniu formo estas selektita: se vi havas iujn formojn desegnita sur la bildon vi vidos la HTML kodon en textarea, se vi ankoraŭ ne eltiris sian formon vi vidos malplenan textarea, sed vi povas pasinteco en ĝi iom da HTML-kodo kaj ŝargi ĝin.
  • Klakante sur la "ŝarĝo" butono (kiujn vi povas vidi nur post alklako sur "mapo" butonon), la HTML kodo ĉeestas en la textarea tradukos en formoj sur la bildo.

Vi povas konsulti la kompletan manlibron de la ilo ĉe la sekvan ligilon: Online Manual

Se vi havas demandojn, simple lasi komenton aŭ delasi min email!


Elŝuti
Aliaj komponantoj en ĉi tiu kategorioĈiuj komponantoj de tiu aŭtoro
KomentojOftaj demandoj kaj respondoj

Propraĵoj

Kreita:
10 oktobro 12

Lasta Ĝisdatigo:
N / A

Alta Rezolucio:
Neniu

Kongrua Browsers:
Firefox, Opero, Chrome

Dosieroj Inkluditaj:
JavaScript JS, HTML, CSS

Programaro Versio:
HTML5

Ŝlosilvortoj

eCommerce, eCommerce, Ĉiuj Eroj, app, spaco, kanvaso, rondon, koordinato, HTML5, bildo, Mapo, Mapper, poli, rect, formo, objektiva, ilo, zoom