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

Mag-subscribe sa aming mga feed upang manatili hanggang sa petsa!

Bago! Sundin amin sa gusto mo!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Ito ay isang mapping html image dinisenyo para sa mga web developer.

Ang tool na ito ay binuo gamit ang canvas HTML5, kaya ang paggamit nito ay limitado sa mga browser na sumusuporta sa canvas, ngunit din ang mga File API:

IE10 +, FF3.6 +, FF14-, FF18 + (ang FF15 magkaroon ng problema sa ilang mga pag-andar canvas, Bug 787,623, na ay nalutas sa FF18), Chrome6 +, Safari6 +, Opera11.1 +

Dahil ito ay isang kasangkapan para sa mga developer, sa tingin ko na ito ay hindi isang malaking limitasyon, dahil akala ko na ang isang web developer ay walang problema upang pumili ng isang naaangkop na browser.

Aking ginamit FF14 upang bumuo ng mga tool, kaya ito ay ang pinakamahusay na choise, ngunit ang mga tool na ito ay nasubok din sa Chrome22 at Opera12


Tandaan: Ang bersyon ng tool na maaari mong makita sa mga link Live Preview, ay isang limitadong bersyon ng tool. Sa bersyong ito maaari ka lamang i-load ang isang tiyak na hanay ng mga imahe, na nakalista sa home page. Pagkatapos-load ng isang imahe maaari kang gumuhit ng lahat ng mga hugis, ngunit lamang ang unang 6 na mga hugis ay nabuo sa HTML code. Ang limitasyon na ito ay hindi pumipigil sa iyo na subukan ang lahat ng mga pag-andar ng tool.


Ano ang isang imahe ng mapa?

Isang mapa ng larawan ay isang HTML code na gumagawa ng iba't-ibang mga lugar ng isang imahe user-click. Ang HTML code ay binubuo ng mga mapa tag na HTML, kasabay ng mga lugar na tag, na nagbibigay-daan sa iyo upang tukuyin ang mga lugar na may hugis-parihaba, polygonal at pabilog na hugis.
Bilang isang halimbawa, kung mayroon kang mga image1.png imahe sa iyong pahina ng HTML, maaari mong isulat ang mga sumusunod na code:

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

Tulad ng iyong nakikita, kailangan mong itakda ang usemap attribute sa img tag, na may parehong halaga ng katangian ng pangalan sa mga tag na mapa. Sa pagitan ng mga <mapa> at </ mapa> maaari mong tukuyin ang bilang ng maraming <lugar> mga tag hangga't gusto mo, ang bawat isa ay kumakatawan sa isang user-click na lugar sa nauugnay na larawan. Ang bawat lugar ay dapat magkaroon ng isang attribute hugis, na maaaring magkaroon ng isa sa mga 3 mga halaga: rect, poly at bilog. Ang hugis rect ay ganap na tinukoy sa pamamagitan ng 2 puntos, ang isang poly hugis ay tinukoy sa pamamagitan ng isang pagkakasunod-sunod ng mga punto at ng isang hugis bilog ay tinukoy sa pamamagitan ng isang punto, na kumakatawan sa center, at isang radius. Ang lahat ng mga puntos ay tinukoy sa pamamagitan ng isang pares ng mga coordinate, na ipinahayag sa pixels, kamag-anak sa tuktok na kaliwang sulok ng imahe. Ang attribute na hugis ay maaari ding magkaroon ang halaga ng "default", na tumutukoy sa mga bahagi ng larawan ay hindi nai-map na may alinman sa mga naunang mga hugis. Sumakay sa account, sa halip, na ang pagkakasunud-sunod kung saan ang mga hugis ay tinukoy sa mapa ay napakahalaga: kung tinukoy mo ang "default" hugis bilang unang hugis sa mapa, ito ay sasapaw sa lahat ng mga kasunod na mga hugis, dahil ang "default" tumutukoy hugis sa buong imahe. Ito ay totoo rin sa mga hugis na sumanib sa bawat isa: maaari mong tukuyin ang isang maliit na hugis sa isang mas malaking hugis, ngunit kailangan mong tukuyin muna ang maliit na hugis at pagkatapos ay ang mas malaking isa. Kung 2 hugis ibahagi ang isang bahagi ng larawan, ang hugis na tinukoy una, nanalo.

Kung nais mong itakda nang manu-mano ang isang mapa ng larawan kailangan mong malaman ang mga coordinate ng lahat ng mga puntos na kailangan upang tukuyin ang iba't ibang hugis. Marahil ito ay hindi isang malaking problema kung ikaw ay may ilang mga lugar sa mapa, lalo na kung ikaw ay may pabilog o hugis-parihaba na lugar. Ngunit kung mayroon kang ilang mga lugar, na may isang binalimbing hugis, itakda nang manu-mano ang mga ito ay hindi isang simpleng gawain.

Ang mapper image tool ay nagpapahintulot sa iyo upang gumuhit ng mga hugis tulad ng rect, poly, at bilog sa napiling imahe, na ay awtomatikong isinalin sa nararapat na HTML code na gumagawa ng mga bahagi ng imahe user-click.

Pagkatapos ng pagguhit ng mga hugis sa mga ibinigay na larawan, maaari kang bumuo ng HTML code simpleng pag-click sa isang pindutan at ang code ay displayied sa isang textarea. Maaari mong kopyahin ang HTML code at gamitin ito sa iyong (mga) pahina ng HTML. Maaari mo ring gawin ang mga reverse proseso: i-paste ang HTML code sa textarea, maaari mong i-load ang code na ito simpleng pag-click ng isang pindutan; ito ay isasalin sa mga hugis sa larawan at maaari mong baguhin ito, magdagdag ng bagong mga hugis at muling bumuo ng HTML code. Ito reverse mekanismo ay kapaki-pakinabang sa daan sa iyo upang i-save ang isang bahagyang mapping proseso at upang magpatuloy upang i-map ang mga imahe bago. Ito ay kapaki-pakinabang din upang pinuhin "mano-mano" pagdisenyo hugis / positioning: matapos ang pagbuo ng mga code sa textarea, maaari mong baguhin ang mga coordinate sa textarea sa mabilisang at muling i-load ito.

Pangunahing mga tampok:

  • Maaari mong piliin ang isang lokal o remote image
  • Maaari mong itakda ang sukat ng target na imahe: ito ang mga sukat na ang imahe ay magkakaroon ng sa iyong HTML na pahina
  • Maaari kang mag-zoom in at out ang mga imahe sa anumang sandali at ito ay hindi makagambala sa ang tunay na mga coordinate na ito ay binuo, na nakasalalay lamang sa mga target ng mga sukat ng imahe. Ang tampok na zoom ay kapaki-pakinabang lamang upang makatulong sa iyo upang gumuhit ng mga hugis.
  • Maaari mong itakda ang ilang mga parameter para sa bawat hugis, gaya ng "href" attribute, ang attribute "alt", ang "id" at "class" na katangian at panghuli ang attribute "target". Upang itakda ang mga parameter ng kailangan mong piliin ang mga hugis: pumili ng isang hugis kailangan mong piliin ang itaas na kaliwang arrow sa toolbar at pagkatapos ay mag-click sa hugis.
  • Maaari mong itakda ang ilang mga parameter para sa mapa: ang mapa "pangalan", ang default na url at ang target.
  • Maaari kang gumuhit ng isang hugis ng pagpili ng hugis mula sa isang tool bar.
  • Upang gumuhit ng isang hugis, pagkatapos ng pagpili nito mula sa toolbar, maaari mo lamang i-click ang gamit ang mouse sa imahe, kung saan nais mong simulan ang hugis.
  • Kung ang hugis ay isang bilog, ang firts point ay ang sentro: paggalaw sa mouse (na-click o pinakawalan), maaari mong makita ang isang bilog na sundin ang cursor. Ang pag-click muli ang mouse ay hihinto sa pagguhit ng mga bilog.
  • Kung ang hugis ay isang rect. ang unang punto ay isa sa mga sulok. Paglipat ng mouse (na-click o pinakawalan) ay gumuhit ng isang rect. Ang pag-click muli ang mouse ay hihinto sa pagguhit.
  • Kung ang hugis ay isang poly ang proseso ay isang maliit na naiiba: sa bawat click ng mouse ay itakda ang isang point; sa kasalukuyang punto ay laging konektado sa isa firs, ginagawa ang poly palaging isang closed hugis; na huminto sa gumuhit ng poly (upang i-set ang huling punto) kailangan mong i-double-click ang mouse.
  • Para sa lahat ng mga hugis maaari mo ring huminto sa gumuhit ng mga ito ng pag-click sa pindutan ng "stop" (sa tuktok na kaliwang arrow sa toolbar).
  • Maaari mong makita ang mga coordinate ang mouse kapag ilipat mo ito sa larawan.
  • Maaari mong gamitin ang kulay-abong-dashed hangganan sa paligid ng larawan upang matukoy ang mga gilid coordinates ng larawan, upang maaari mong gamitin ang mga hangganan tulad ng ito ay bahagi ng imahe: gayon, maaari mong i-click sa hangganan sa loob ng drawing hugis, jus tulad ng ito ay bahagi ng imahe. Halimbawa, kung nag-click sa itaas na kaliwang sulok ng hangganan, ikaw ay itakda ang isang punto sa (0, 0) coordinate. Kung nag-click sa kaliwa-hangganan, sa anumang punto, ikaw ay itakda ang isang punto sa (0, y) coordinates, etc.
  • Maaari kang pumili ng isang naka-iginuhit na hugis at baguhin / palitan ang laki / tanggalin ang mga ito. Upang alisin ito kailangan mong gamitin ang "goma" sa toolbar, na lilitaw bilang naka-down na lapis pagpili lamang ng isang hugis.
  • Maaari mong piliin ang kulay ng tabas ng hugis mula sa isang set ng mga 5 kulay (hindi na ito ay isang kasangkapan na disenyo, kaya ako ay limitado ang bilang ng mga kulay at din na hindi ka maaaring pumili ng isang iba't ibang mga kulay para sa bawat hugis).
  • Maaari mong i-click sa pindutan ng "mapa", iyon ay makikita lamang kapag pinili mo ang pindutan ng "stop" sa toolbar at walang hugis ay napili: kung mayroon kang ilang mga hugis na iginuhit sa larawan makikita mo ang HTML code sa isang textarea, kung hindi mo pa na iginuhit ng isang hugis makikita mo ang isang walang laman na textarea, ngunit maaari mong nakalipas sa mga ito ang ilang mga HTML code at i-load ito.
  • Ang pag-click sa pindutan ng "load" (na maaari mong makita lamang pagkatapos mag-click sa pindutan ng "mapa"), sa kasalukuyan HTML code sa textarea ay isasalin sa mga hugis sa imahe.

Maaari kang sumangguni sa kumpletong manual ng tool sa sumusunod na link: Online Manual

Kung mayroon kang anumang mga katanungan, mag-iwan ng komento o i-drop sa akin ng isang email!


I-download
Iba pang mga bahagi sa kategoryang itoAng lahat ng mga bahagi ng may-akdang ito
Mga komentoMga madalas itanong at sagot

Properties

Nilikha:
Oktubre 10 12

Huling Update:
N / A

High Resolution:
Hindi

Katugmang Browser:
Firefox, Opera, Chrome

Kasamang File:
JavaScript JS, HTML, CSS

Bersyon ng Software:
HTML5

Keyword

eCommerce, eCommerce, Lahat ng Mga Item, app, lugar, canvas, bilog, koordinado, HTML5, imahen, mapa, mapper, poly, rect, hugis, target, kasangkapan, zoom