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

— Lisäosa WorldWideScripts.net

Tilaa syötteen pysymään ajan tasalla!

Uusi! Seuraa meitä kuin haluat!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Tämä on html kuvakarttaa suunniteltu web-kehittäjille.

Työkalu on kehitetty HTML5 kankaalle, joten sen käyttö rajoittuu tukevissa selaimissa kangas, mutta myös File API:

IE10 +, FF3.6 +, FF14-, FF18 + (FF15 on ongelmia joidenkin kankaalle toimintoja, Bug 787623, joka ratkaistaan ​​FF18), Chrome6 +, Safari6 +, Opera11.1 +

Koska tämä on työkalu kehittäjille, mielestäni tämä ei ole iso rajoitus, koska oletan, että web-kehittäjä ei ole ongelma valita sopiva selain.

Olen käyttänyt FF14 kehittää työkalu, joten tämä on paras valinta, mutta työkalu on testattu myös Chrome22 ja Opera12


Huom: versio työkalu, näet Live Preview linkki, on rajoitettu versio työkalun. Tämän version voit ladata vain tietyn joukon kuvia, listattu kotisivulla. Lataamisen jälkeen kuva voit piirtää kaikki muodot, mutta vain ensimmäinen 6 muotoja syntyy HTML-koodissa. Tämä rajoitus ei estä voit testata kaikki toiminnot työkalun.


Mikä on kuva kartta?

Kuva kartta on HTML-koodi, joka tekee käyttäjän klikattava eri alueilla kuvan. HTML-koodi koostuu kartan HTML-koodi, yhdessä alueen tunniste, jonka avulla voit määrittää alueilla suorakulmainen, monikulmion ja ympyröistä.
Esimerkiksi, jos sinulla on image1.png kuvan HTML sivulla, voit kirjoittaa seuraava koodi:

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

Kuten näette, sinun täytyy asettaa usemap määritettä img tag, että on sama arvo nimi attribuutin kartalla tag. Välillä <kartta> ja </ kartta> voit määrittää niin monta <alue> tageja kuin haluat, jokainen edustaa käyttäjä klikattava alue liittyvän kuvan. Kullakin alueella on oltava muodoltaan ominaisuus, että voi olla jokin 3 arvot: rect, poly ja ympyrä. Rect muoto on täysin määritelty 2 pistettä, poly muoto on määritelty sekvenssi pistettä ja ympyrän muotoinen on määritelty piste, joka edustaa keskus, ja säde. Kaikki kohdat määritellään pari koordinaattien ilmaistuna pikseliä, sukulaiset vasemmassa yläkulmassa kuvan. Muoto attribuutti voi myös olla "default" arvo, jotka viittaavat kuvan osat eivät kartoitettu mitään edellisen muotoja. Ottaa huomioon, sen sijaan, että järjestys, jossa muodot on määritelty kartta ovat erittäin tärkeitä: jos määrittelee "default" muoto ensimmäisenä muoto karttaan, se ohittaa kaikki myöhemmät muodot, koska "default" muoto viittaa koko kuvan. Tämä on totta myös muotoja, jotka päällekkäin: voit määritellä hieman muoto tulee isompi muoto, mutta sinun täytyy määrittää ensin pieni muoto ja sitten isompi. Jos 2 muotoja jakaa osan kuvasta, muoto määritetään ensin, voittaa.

Jos haluat asettaa manuaalisesti kuvakartan sinun täytyy tietää koordinaatit kaikki tarvittavat pisteet määritellä eri muotoja. Luultavasti tämä ei ole iso ongelma, jos sinulla on muutamia alueita kartoittaa, varsinkin jos sinulla on pyöreä tai suorakulmainen alueilla. Mutta jos sinulla on useita alueita, joilla monikulmiomuodon asettaa manuaalisesti ei ole yksinkertainen tehtävä.

Kuva mapper työkalun avulla voit piirtää muotoja kuten RECT, poly, ja ympyrä valitun kuvan, että käännetään automaattisesti vastaava HTML-koodi, joka tekee alueet Käyttäjän klikattava.

Kun piirustus muodot annetaan kuva, voit luoda HTML-koodia yksinkertaisesti klikkaamalla painiketta ja koodi on displayied sisään textarea. Voit kopioida HTML-koodi ja käyttää sitä HTML sivu (a). Voit myös tehdä käänteinen prosessi: liittämällä HTML-koodia textarea, voit ladata tämän koodin yksinkertaisesti klikkaamalla painiketta; tämä käännetään muodot kuvan ja voit muokata niitä, lisätä uusia muotoja ja uudelleen tuottaa HTML-koodia. Tämä käänteinen mekanismi on hyödyllistä voit säästää osittainen kartoitus prosessin ja jatkaa kartoittaa kuvan myöhemmin. On myös hyödyllistä tarkentaa "manuaalisesti" muoto suunnittelu / paikannus: muodostamisen jälkeen koodia textarea, voit muokata koordinaatit textarea lennossa ja uudelleen lataa sen.

Pääpiirteet:

  • Voit valita paikallisen tai kauko kuva
  • Voit asettaa tavoitteeksi kuvakoot: nämä ovat kokoa, että kuva on HTML sivu
  • Voit lähentää ja loitontaa kuvan tahansa ja tämä ei häiritse todellinen koordinaatit että syntyy, että riippuu vain kohde koot kuvan. Zoom-toiminto on hyötyä vain auttaa voit piirtää muotoja.
  • Voit asettaa useita parametreja kukin muoto, kuten "href" ominaisuus, "alt" ominaisuus, "id" ja "luokka" ominaisuudet ja lopuksi "tavoite" ominaisuus. Asettaa parametri on valittava muoto: Valitse muoto sinun täytyy valita sivun vasemmassa nuolta työkalupalkin ja napsauta muoto.
  • Voit asettaa joitakin parametreja kartta: kartta "nimi", oletuksena url ja tavoite.
  • Voit piirtää muoto valitsemalla muodon työkaluriviltä.
  • Voit piirtää muodon, kun olet valinnut sen työkalupalkin, voit klikkaa hiirellä kuvan, jossa haluat aloittaa muoto.
  • Jos muoto on ympyrä, flirttailee kohta on keskellä: liikuttamalla hiirtä (napsautetaan tai vapautettu), voit nähdä ympyrä joka seuraa kohdistin. Klikkaamalla taas hiiri pysähtyy ympyrän piirtämistä.
  • Jos muoto on rect. Ensimmäinen kohta on yksi kulma. Hiiren liikuttaminen (napsautetaan tai vapautettu) vetää rect. Klikkaamalla taas hiiri lopettaa piirtämisen.
  • Jos muoto on poly prosessi on hieman erilainen: kunkin hiiren klikkauksella asettaa piste; nykyinen kohta liittyy aina kuusien yksi, jolloin poly aina suljettu muoto; lopettaa piirtää poly (asettaa viimeinen piste) sinun täytyy kaksoisnapsauttamalla hiiren.
  • Kaikkien muotojen voit myös lopettaa hyödyntää niitä klikkaamalla "stop" -painiketta (sivun vasemmassa nuolta työkalupalkin).
  • Näet hiiren koordinaatit, kun siirrät sen kuvan.
  • Voit käyttää harmaa-romutti reunus kuvan määrittää reunaan kuvan koordinaattien, joten voit käyttää rajan se oli osa kuvat niin, voit klikata rajalla aikana muoto piirustus, jus koska se oli osa kuvan. Esimerkiksi, jos klikkaat vasemmassa yläkulmassa rajan, voit asettaa pisteen (0, 0) koordinaatit. Jos valitset vasen-rajan, joka kohdassa, voit asettaa pisteen (0, y) koordinaatit, jne.
  • Voit valita jo piirretty muoto ja muokata / muuttaa / poistaa sen. Poistaa se sinun täytyy käyttää "kumi" työkalupalkin, joka näkyy kääntyi alas kynä vain valitsemalla muodon.
  • Voit valita värin ääriviivat muotoja joukko 5 väriä (tämä ei ole suunnittelutyökalu, joten olen rajoitettu määrä väriä ja myös et voi valita eri väri kullekin muoto).
  • Voit klikata "kartta" -painiketta, joka on näkyvissä vain, jos valitset "stop" -painiketta työkalurivillä eikä muoto on valittu: jos sinulla on muodot piirretty kuva näet HTML-koodia textarea, jos et ole vielä piirretty muoto näet tyhjä textarea, mutta voit aiemmin se joitakin HTML-koodia ja lataa sen.
  • Klikkaamalla "load" -painiketta (voit nähdä vasta klikkaamalla "kartta" -painiketta), HTML-koodia läsnä textarea käännetään muotoja kuvaa.

Voit kuulla täysin manuaalisesti työkalun seuraavasta linkistä: Online Manual

Jos sinulla on kysyttävää, vain jättää kommentin tai pudota minulle sähköpostia!


Lataa
Muut komponentit tässä luokassaKaikki osat tämän tekijän
KommentitUsein kysyttyjä kysymyksiä ja vastauksia

Ominaisuudet

Luotu:
10 lokakuu 12

Viimeisin päivitys:
N /

Korkea resoluutio:
Ei

Yhteensopiva Selaimet:
Firefox, Opera, Chrome

Tiedostoja mukana:
JavaScript JS, HTML, CSS

Ohjelmistoversio:
HTML5

Avainsanoja

eCommerce, eCommerce, Kaikki tuotteet, App, alue, kangas, ympyrä, koordinoida, HTML5, kuva, kartta, mapper, poly, RECT, muoto, tavoite, työ, kalu, zoomaus