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å vores feed for at holde dig ajour !

Nyt! Følg os som du ønsker det!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Dette er en HTML billede kortlægning designet til web-udviklere.

Værktøjet er udviklet ved hjælp af HTML5 lærred, så dens anvendelse er begrænset til de browsere, der understøtter lærredet, men også File API:

IE10 +, FF3.6 +, FF14-, FF18 + (den FF15 har problemer med nogle lærred funktionaliteter, Bug 787.623, som vil blive løst i FF18), Chrome6 +, Safari6 +, Opera11.1 +

Da dette er et værktøj for udviklere, jeg tror, ​​at dette ikke er en stor begrænsning, fordi jeg formoder, at en web-udvikler har ikke noget problem at vælge en passende browser.

Jeg har brugt FF14 til at udvikle værktøjet, så dette er den bedste valget, men værktøjet er blevet testet også i Chrome22 og Opera12


Bemærk: Versionen af det værktøj, som du kan se i linket Live-preview, er en begrænset version af værktøjet. Med denne version kan du kun indlæse et bestemt sæt af billeder, der er opført på hjemmesiden. Efter indlæsning af et billede kan du tegne alle former, men kun de første 6 figurer vil blive genereret i HTML-koden. Denne begrænsning gælder ikke forhindre dig at teste alle de funktionaliteter i værktøjet.


Hvad er et billede kort?

Et billede kort er en HTML-kode, der gør brugeren klikbare forskellige områder af et billede. HTML-koden består af kortet HTML-tag, sammenholdt med området tag, der giver dig mulighed for at definere områder med rektangulære, polygonale og cirkulære former.
Som et eksempel, hvis du har image1.png billede i din HTML-side, kan du skrive 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, er du nødt til at indstille USEMAP attribut i img tag, der vil have den samme værdi af navnet attribut i kortet tag. Mellem <kortet> og </ map> kan du definere så mange <området> tags, som du ønsker, hver repræsenterer en bruger-klikbart område på det tilhørende billede. Hvert område skal have en form, attribut, der kan have en af de 3 værdier: rekt, poly og cirkel. Den rect form er fuldstændigt defineret med 2 point, er en poly form defineret af en sekvens af punkter, og en cirkel form er fremstillet ved et punkt, der repræsenterer midten, og en radius. Alle punkter er defineret af et par koordinater, udtrykt i pixels, pårørende til øverste venstre hjørne af billedet. Attribut Formen kan også have "default" -værdi, der refererer til de dele af billedet ikke kortlagt med nogen af ​​de tidligere figurer. Tag højde i stedet, at den rækkefølge, som de figurer er defineret i kortet er meget vigtige: Hvis du definerer "default" form som første form i kortet, vil det tilsidesætte alle de efterfølgende figurer, fordi den "standard" form refererer til hele billedet. Dette gælder også med de figurer, der overlapper hinanden: du kan definere en lille form til en større form, men du har først at definere den lille figur og derefter den større. Hvis 2 former deler en del af billedet, formen defineret først, vinder.

Hvis du vil indstille manuelt et billede kort, du nødt til at kende koordinaterne for alle de punkter, der er nødvendige for at definere de forskellige former. Sandsynligvis er det ikke et stort problem, hvis du har få områder at kortlægge, især hvis du har cirkulære eller rektangulære områder. Men hvis du har flere områder, med en polygonal form, indstille dem manuelt er ikke en enkel opgave.

Billedet Mapper værktøj giver dig mulighed for at tegne figurer såsom rekte, poly, og cirkel om det valgte billede, som vil blive oversat automatisk i den tilsvarende HTML-kode, der gør de områder af billedet brugervenligt klikbare.

Når du har tegnet figurerne på det givne billede, kan du generere HTML-koden blot at klikke på en knap og koden vil blive displayied i et textarea. Du kan kopiere HTML-koden og bruge det i din HTML-side (r). Du kan også gøre den omvendte proces: indsætte HTML-koden i textarea, kan du indlæse denne kode blot at klikke på en knap; dette vil blive oversat til de figurer på billedet, og du kan ændre dem, tilføje nye figurer og re-generere HTML-koden. Dette omvendte mekanisme er nyttig, så du kan spare en delvis kortlægning proces, og at fortsætte med at kortlægge billedet senere. Det er også nyttigt at forfine "manuelt" formen designe / positionering: efter generere koden i textarea, kan du ændre koordinaterne i textarea på flue og re-indlæse den.

Hovedtræk:

  • Du kan vælge en lokal eller fjern billede
  • Du kan indstille målbilledet størrelser det er de størrelser, at billedet vil have i dit HTML-side
  • Du kan zoome ind og ud af billedet i hvilket som helst tidspunkt, og det vil ikke gribe ind i de reelle koordinater, der vil blive genereret, der kun afhænger af målgruppen størrelser af billedet. Zoom-funktion er kun nyttigt at hjælpe dig med at tegne figurer.
  • Du kan indstille flere parametre for hver figur, såsom "href" attribut, "alt" attribut, "ID" og "klasse" attributter og endelig "mål" attribut. For at indstille den parameter, du nødt til at vælge formen: for at vælge en figur, du nødt til at vælge det øverste venstre pil på værktøjslinjen, og klik derefter på formen.
  • Du kan indstille nogle parametre for kortet: kortet "navn", er standard url og målet.
  • Du kan tegne en figur vælge formen fra en værktøjslinje.
  • For at tegne en figur, efter at have valgt det fra værktøjslinjen kan du bare klikke med musen på billedet, hvor man ønsker at starte formen.
  • Hvis formen er en cirkel, det firts punkt er centrum: bevæge musen (klikket eller frigivet), kan du se en cirkel, der følger markøren. Klik igen musen vil stoppe med at tegne cirklen.
  • Hvis formen er en rect. det første punkt er en af ​​hjørnet. Bevæge musen (klikket eller frigivet) vil trække en rect. Hvis du klikker igen på musen vil stoppe tegning.
  • Hvis formen er en poly processen er lidt anderledes: hvert klik med musen vil sætte et punkt; det aktuelle punkt er altid forbundet med firs én, hvilket gør poly altid en lukket form; at holde op med at trække poly (for at angive det sidste punkt), du er nødt til at fordoble klikke med musen.
  • For alle de figurer du kan også holde op med at tegne dem at klikke på knappen "stop" (øverste venstre pil på værktøjslinjen).
  • Du kan se musen koordinater, når du flytter den på billedet.
  • Du kan bruge den grå-stiplet kant rundt om billedet at bestemme kant koordinaterne for det billede, så du kan bruge grænsen som det var en del af billedet: så kan du klikke på grænsen under formen tegning, jus som det var en del af billedet. For eksempel, hvis du klikker på det øverste venstre hjørne af grænsen, vil du sætte et punkt på (0, 0) koordinater. Hvis du klikker på venstre-grænsen, i ethvert punkt, vil du sætte et punkt på (0, y) koordinater mv
  • Du kan vælge en allerede trukket form og ændre / resize / fjerne det. At fjerne det du nødt til at bruge "gummi" i værktøjslinjen, der vises som en slået ned blyant kun at vælge en figur.
  • Du kan vælge farven på konturen af ​​figurerne fra et sæt af 5 farver (dette er ikke et design værktøj, så jeg har begrænset antallet af farver, og også kan du ikke vælge en anden farve for hver figur).
  • Du kan klikke på "kort" knappen, der er synlig, når du vælger "stop" knappen på værktøjslinjen, og ingen form er valgt: Hvis du har nogle figurer trukket på billedet vil du se HTML-koden i et textarea, hvis du endnu ikke har tegnet en figur, du vil se en tom textarea, men du kan forbi i det nogle HTML-kode og indlæse den.
  • Ved at klikke på "belastning" -knappen (som du kan kun se efter at have klikket på "kort" knappen), vil HTML-koden til stede i textarea oversættes figurer på billedet.

Du kan findes i den fuldstændige vejledning af værktøjet på følgende link: Online manual

Hvis du har spørgsmål, bare efterlade en kommentar eller send mig en e-mail!


Hent
Andre komponenter i denne kategoriAlle komponenter i denne forfatter
KommentarerOfte stillede spørgsmål og svar

Egenskaber

Oprettet:
10 oktober 12

Sidste ændring:
N / A

Høj opløsning:
Ingen

Kompatible Browsere:
Firefox, Opera, Chrome

Filer Inkluderet:
JavaScript JS, HTML, CSS

Software Version:
HTML5

Søgeord

eCommerce, eCommerce, Alle emner, app, områ, de, læ, rred, cirkel, koordinere, HTML5, billede, kort, Mapper, poly, rect, form, må, l, væ, rktø, j, zoom