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

Abonner på vårt feed for å holde deg oppdatert!

Nyhet! Følg oss som du vil ha det!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Dette er en html bilde kartlegging designet for webutviklere.

Verktøyet er utviklet ved hjelp av HTML5 lerret, så bruken er begrenset til nettlesere som støtter lerretet, men også File API-er:

IE10 +, FF3.6 +, FF14-, FF18 + (den FF15 har problemer med noen lerret funksjonalitet, Bug 787 623, som vil bli løst i FF18), Chrome6 +, Safari6 +, Opera11.1 +

Siden dette er et verktøy for utviklere, tror jeg at dette ikke er en stor begrensning, fordi jeg antar at en webutvikler har ikke noe problem å velge en passende nettleser.

Jeg har brukt FF14 å utvikle verktøyet, så dette er den beste ønsker, men verktøyet har blitt testet også i Chrome22 og Opera12


Merk: versjon av verktøyet som du kan se i linken Live Preview, er en begrenset versjon av verktøyet. Med denne versjonen kan du bare laste et bestemt sett av bilder, oppført på hjemmesiden. Når du har lagt et bilde kan du tegne alle former, men bare de første 6 former vil bli generert i HTML-koden. Denne begrensningen hindrer deg ikke i å teste alle funksjonene i verktøyet.


Hva er et bildekart?

Et bildekart er en HTML-kode som gjør bruker klikkbar forskjellige områder i et bilde. HTML-koden består av kartet HTML-koden, i forbindelse med området tag, som lar deg definere områder med rektangulære, polygonale og runde former.
Som et eksempel, hvis du har image1.png bilde i HTML-siden, kan du skrive inn følgende kode:

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

Som du kan se, må du sette den usemap attributt i img taggen, som vil ha den samme verdien av navnet attributt i kartet tag. Mellom <map> og </ map> kan du definere så mange <område> koder som du vil, hver og en som representerer en brukerklikkbare området på den tilhørende bilde. Hvert område må ha en form attributt, som kan ha en av de 3 verdier: rect, poly og sirkel. Den rect formen er fullstendig definert av 2 poeng, er en poly form definert ved en sekvens av punkter og en sirkel formen er definert ved et punkt som representerer sentrum og en radius. Alle punktene er definert av et par koordinater, uttrykt i piksler, slektninger til øverste venstre hjørne av bildet. Formen attributtet kan også ha "default" verdi, som refererer til de deler av bildet ikke kartlagt med noen av de tidligere former. Ta hensyn til, i stedet, at rekkefølgen som figurene er definert i kartet er svært viktig: Hvis du definerer "default" form som først form i kartet, vil det overstyre alle de påfølgende figurer, fordi "default" form refererer til hele bildet. Dette gjelder også med figurer som overlapper hverandre: du kan definere litt form til en større form, men du må definere først den lille figuren og deretter den større. Hvis 2 figurer dele en del av bildet, formen er definert først, vinner.

Hvis du ønsker å stille manuelt et bildekart du må vite koordinatene til alle punktene som trengs for å definere forskjellige former. Sannsynligvis er dette ikke et stort problem hvis du har noen områder for å kartlegge, spesielt hvis du har sirkulære eller rektangulære områder. Men hvis du har flere områder, med en mangekantet form, sette dem manuelt er ikke en enkel oppgave.

Bildet mapper verktøyet kan du tegne figurer som rect, poly, og sirkel på det valgte bildet, som vil bli oversatt automatisk i tilsvarende HTML-kode som gjør områdene i bildet brukerklikkbare.

Etter å tegne figurene på gitt bilde, kan du generere HTML-koden å klikke på en knapp og koden vil bli displayied i et tekstfelt. Du kan kopiere HTML-koden og bruke det i HTML-side (r). Du kan også gjøre det motsatte prosessen: lime inn HTML-koden i tekstfeltet, kan du laste inn denne koden å klikke på en knapp; dette vil bli oversatt i figurene på bildet og du kan endre dem, legge til nye former og re-generere HTML-koden. Denne omvendte mekanismen er nyttig å la deg lagre en delvis kartleggingsprosess og å fortsette å kartlegge bilde senere. Det er også nyttig å avgrense "manuelt" formen utforming / plassering: etter å generere koden i tekstfeltet, kan du endre koordinatene i textarea på fly og re-load det.

Hovedtrekkene:

  • Du kan velge en lokal eller ekstern bilde
  • Du kan sette target bildestørrelser: dette er de størrelsene at bildet vil ha i din HTML-side
  • Du kan zoome inn og ut av bildet i noen øyeblikk, og dette vil ikke påvirke de reelle koordinater som vil bli generert, det avhenger bare på målet størrelser av bildet. Zoom-funksjonen er bare nyttig for å hjelpe deg med å tegne figurene.
  • Du kan stille inn flere parametere for hver form, for eksempel "href" attributt, "alt" attributt, den "id" og "klasse" attributter og til slutt "target" attributt. Å sette parameteren du har å velge formen: å velge en form du har å velge den øverste venstre pil i verktøylinjen, og klikk deretter på formen.
  • Du kan stille noen parametere for kartet: kart "navn", standard url og målet.
  • Du kan tegne en figur velge form fra en verktøylinje.
  • For å tegne en form, etter å ha valgt den fra verktøylinjen, kan du bare klikke med musen på bildet, der du ønsker å starte formen.
  • Dersom formen er en sirkel, er firts punkt sentrum: bevege musen (klikket eller frigitt), kan du se en sirkel som følge markøren. Klikker du igjen med musen vil slutte å tegne sirkelen.
  • Dersom formen er et rekt. det første punktet er en av hjørnet. Bevege musen (klikket eller frigitt) vil trekke en rect. Klikker du igjen med musen vil slutte å tegne.
  • Dersom formen er en poly prosessen er litt annerledes: hver museklikk vil sette et punkt; gjeldende punkt er alltid forbundet med graner en, noe som gjør den poly alltid en lukket form; å slutte å trekke poly (for å sette det siste punktet) må du dobbeltklikke på musen.
  • For alle figurene kan du også slutte å trekke dem klikke på "stopp" knappen (øverst til venstre pil i verktøylinjen).
  • Du kan se musa koordinater når du flytter den på bildet.
  • Du kan bruke den grå-stiplet ramme rundt bildet for å bestemme kant koordinatene til bildet, slik at du kan bruke den grensen som det var en del av bildet: så kan du klikke på grensen i løpet av formen tegningen, jus som det var en del av bildet. For eksempel, hvis du klikker på den øverste venstre hjørne av grensen, vil du sette et punkt (0, 0) koordinerer. Hvis du klikker på venstre-grensen, i ethvert punkt, vil du sette et punkt i (0, y) koordinater, etc.
  • Du kan velge en allerede trukket form og modifisere / endre størrelse / fjerne det. For å fjerne det du har å bruke "gummi" på verktøylinjen, som vil fremstå som en slått ned blyant bare velge en form.
  • Du kan velge fargen på konturen av figurene fra et sett med 5 farger (dette er ikke et designverktøy, så jeg har begrenset antall farger og også du ikke kan velge en annen farge for hver figur).
  • Du kan klikke på "kart" -knappen, som er synlig bare når du velger "stopp" knappen på verktøylinjen, og ingen form er valgt: hvis du har noen figurer tegnet på bildet vil du se HTML-kode i en textarea, Hvis du ennå ikke har trukket en form, vil du se en tom tekstfelt, men du kan forbi i det litt HTML-kode og laste den.
  • Ved å klikke på "Last ned" knappen (som du kan se bare etter å ha klikket på "kart" -knappen), vil HTML-koden til stede i textarea settes i figurene på bildet.

Du kan ta kontakt med hele manualen av verktøyet på følgende link: Online Manual

Hvis du har noen spørsmål, bare legge igjen en kommentar eller send meg en e-post!


Laste ned
Andre komponenter i denne kategorienAlle komponenter av denne forfatteren
KommentarerOfte stilte spørsmål og svar

Egenskaper

Laget:
10 oktober 12

Siste oppdatering:
N / A

Høy oppløsning:
Nei

Kompatible nettlesere:
Firefox, Opera, Chrome

Filer Inkludert:
Javascript JS, HTML, CSS

Programvareversjon:
HTML5

Søkeord

eCommerce, eCommerce, Alle artikler, app, områ, de, lerret, sirkel, koordinere, HTML5, image, kart, mapper, poly, rect, form, target, verktø, y, zoom