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

Prenumerera på vårt foder för att hålla dig uppdaterad!

Nytt! Följ oss som du vill ha det!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Detta är en html bild kartläggning utformad för webbutvecklare.

Verktyget har utvecklats med hjälp av HTML5 duk, så dess användning är begränsad till de webbläsare som stöder duken, men också File API:

IE10 +, FF3.6 +, FF14-, FF18 + (den FF15 har problem med vissa duk funktioner, Bug 787623, som kommer att lösas i FF18), Chrome6 +, Safari6 +, Opera11.1 +

Eftersom detta är ett verktyg för utvecklare, jag tror att detta är inte en stor begränsning, eftersom jag antar att en webbutvecklare har inga problem att välja en lämplig webbläsare.

Jag har använt FF14 för att utveckla verktyg, så det här är det bästa valet, men verktyget har testats också i Chrome22 och Opera12


Obs: Den version av verktyget som du kan se i länken Live Preview är en begränsad version av verktyget. Med den här versionen kan du bara läsa in en specifik uppsättning bilder, noterat på hemsidan. Efter att ha laddat en bild kan du dra alla former, men bara de första 6 formerna kommer att genereras i HTML-koden. Denna begränsning inte hindra dig att testa alla funktioner i verktyget.


Vad är en klickbar bild?

En bildkarta är en HTML-kod som gör användaren klickbar olika områden i en bild. HTML-koden består av kartan HTML-taggen, tillsammans med området taggen, som tillåter dig att definiera områden med rektangulära, polygonala och runda former.
Som ett exempel, om du har image1.png bild i din HTML-sida, kan du skriva följande kod:

 <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 ni kan se, måste du ställa in usemap attributet i img-taggen, som kommer att ha samma värde på namnet attribut i kartan taggen. Mellan <karta> och </ karta> kan du definiera så många <area> taggar som du vill, var och en representerar ett användarklickbara området på den tillhörande bilden. Varje område måste ha en form attribut som kan ha en av de 3 värdena: rekt, poly och cirkel. Rect formen är helt definierad av 2 poäng, är en poly form som definieras av en sekvens av poäng och en cirkel form åstadkommits genom en punkt, som representerar centrum och en radie. Alla de punkter definieras av ett par av koordinater, uttryckt i pixlar, släktingar till övre vänstra hörnet av bilden. Formen attribut kan också ha värdet "default", som hänvisar till de delar av bilden inte mappade med någon av de tidigare former. Beakta i stället att den ordning i vilken formerna definieras i kartan är mycket viktigt: om du definierar "default" form som första form i kartan, kommer det att åsidosätta alla efterföljande former, eftersom "default" form hänvisar till hela bilden. Detta gäller även med de former som överlappar varandra: du kan definiera en liten form till en större form, men du måste först definiera den lilla formen och sedan större. Om 2 former delar en del av bilden, formen definieras först, vinner.

Om du vill ställa in manuellt en klickbar bild som du måste veta koordinaterna för alla de punkter som krävs för att definiera de olika formerna. Förmodligen är detta inte ett stort problem om du har några områden för att kartlägga, särskilt om du har cirkulära eller rektangulära områden. Men om du har flera områden, med en polygonal form, ställa in dem manuellt är inte en enkel uppgift.

Bild mapper verktyget kan du rita former såsom rekt, poly, och cirkel på den valda bilden, som kommer att översättas automatiskt i motsvarande HTML-kod som gör områdena i bilden användar klickbar.

När du har ritat figurerna på den givna bilden, kan du skapa HTML-koden helt enkelt klicka på en knapp och koden kommer att displayied i en textarea. Du kan kopiera HTML-koden och använda den i din HTML-sida (s). Du kan också göra den omvända processen: klistra in HTML-koden i textarea, kan du ladda koden helt enkelt klicka på en knapp; Detta kommer att översättas i former på bilden och du kan ändra dem, lägga till nya former och åter generera HTML-koden. Denna omvända mekanism är användbar för att du kan spara en partiell kartläggningen och att fortsätta att kartlägga bilden senare. Det är också bra att förfina "manuellt" formen design / placering: efter att generera kod i textarea, kan du ändra koordinaterna i textarea i farten och åter läsa in den.

Huvuddrag:

  • Du kan välja en lokal eller fjärr bild
  • Du kan ställa in mål bildstorlekar: det är de storlekar som bilden kommer att ha i din HTML-sida
  • Du kan zooma in och ut bilden i varje ögonblick och det kommer inte att påverka de verkliga koordinater som kommer att genereras, som beror enbart på målgrupp storlekar av bilden. Zoomfunktionen är endast användbar för att hjälpa dig att rita former.
  • Du kan ställa in flera parametrar för varje form, såsom "href" attribut, attributet "alt", den "id" och "klass" attribut och slutligen attributet "target". För att ställa in parametern måste du välja formen: för att välja en form måste du välja den övre vänstra pilen i verktygsfältet och klicka sedan på formen.
  • Du kan ställa in några parametrar för kartan: kartan "namn", standard url och målet.
  • Du kan rita en form att välja form från ett verktygsfält.
  • Om du vill rita en form, efter att ha valt den från verktygsfältet, kan du helt enkelt klicka med musen på bilden där du vill påbörja form.
  • Om formen är en cirkel, är firts punkt centrum: flytta musen (klickas eller släpps), kan du se en cirkel som följer markören. Klicka igen musen sluta rita cirkeln.
  • Om formen är en rect. den första punkten är en av hörnet. Flytta musen (klickas eller släpps) kommer att dra en rect. Klicka igen musen sluta rita.
  • Om formen är en poly processen är lite annorlunda: varje klick med musen kommer att sätta en punkt; den aktuella punkten är alltid förbunden med granar en, vilket gör poly alltid en sluten form; för att stoppa att dra poly (för att ställa in den sista punkten) måste du dubbelklicka på musen.
  • För alla former kan du också sluta att rita dem att klicka på knappen "stopp" (övre vänstra pilen i verktygsfältet).
  • Du kan se musen koordinaterna när du flyttar den på bilden.
  • Du kan använda den grå-streckad ram runt bilden för att bestämma kant koordinaterna för bilden, så att du kan använda gränsen som var en del av bilden: så kan du klicka på gränsen under form ritning, jus som det var en del av bilden. Till exempel, om du klickar på det övre vänstra hörnet av gränsen, kommer du ställa in en punkt vid (0, 0) koordinater. Om du klickar på vänster gränsen, i någon punkt kommer du ställa in en punkt på (0, y) koordinater, etc.
  • Du kan välja en redan dragen form och ändra / ändra storlek / ta bort den. För att ta bort det måste du använda "gummi" i verktygsfältet, som kommer att visas som en tackade penna endast välja en form.
  • Du kan välja färg för konturen av formerna från en uppsättning av 5 färger (detta är inte ett designverktyg, så jag har begränsat antalet färg och även du inte kan välja en annan färg för varje form).
  • Du kan klicka på knappen "karta", som syns bara när du väljer knappen "stopp" på verktygsfältet och ingen form väljs: Om du har några former dras på bilden ser du HTML-koden i en textarea, Om du ännu inte har dragit en form kommer du att se en tom textarea, men du kan förflutna i det lite HTML-koden och ladda den.
  • Om du klickar på "last" -knappen (som du kan se bara efter att ha klickat på "karta" knappen), kommer HTML-koden som finns i textarea översättas i former på bilden.

Du kan använda den fullständiga handboken för verktyget på följande länk: Online Manual

Om du har några frågor, bara lämna en kommentar eller släpp mig en e-post!


Hämta
Andra komponenter i denna kategoriAlla komponenter i denna författare
KommentarerVanliga frågor och svar

Egenskaper

Skapad:
10 oktober 12

Senaste uppdateringen:
N / A

Hög upplösning:
Nej

Kompatibla webbläsare:
Firefox, Opera, Chrome

Filer Ingår:
JavaScript JS, HTML, CSS

Programvaruversion:
HTML5

Nyckelord

e-handel, e-handel, Alla artiklar, app, områ, de, må, larduk, cirkel, koordinat, HTML5, bild, Karta, mapper, poly-, rekt, form, må, l, verktyg, zoom