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

Rep les nostres RSS per estar al dia!

Nou! Segueix-nos com vulguis!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Aquest és un mapatge d'imatge html dissenyat per als desenvolupadors web.

L'eina s'ha desenvolupat utilitzant el llenç HTML5, pel que el seu ús es limita als navegadors que suporten el llenç, sinó també l'API de l'arxiu de:

IE10 +, FF3.6 +, FF14-, FF18 + (el FF15 tenen problemes amb algunes funcionalitats de lona, ​​Bug 787.623, que seran resolts en FF18), Chrome6 +, Safari6 +, Opera11.1 +

Com es tracta d'una eina per als desenvolupadors, crec que això no és una gran limitació, perquè suposo que un desenvolupador web no té cap problema per triar un navegador adequat.

He utilitzat FF14 per desenvolupar l'eina, de manera que aquesta és la millor alternativa, si l'eina s'ha provat també en Chrome22 i Opera12


Nota: La versió de l'eina que es pot veure a l'enllaç Live Preview, és una versió limitada de l'eina. Amb aquesta versió només es pot carregar un conjunt específic de les imatges, que apareix a la pàgina principal. Després de carregar una imatge es pot extreure totes les formes, però només els primers 6 formes es generaran en el codi HTML. Aquesta limitació no impedeix posar a prova totes les funcionalitats de l'eina.


Què és un mapa d'imatge?

Un mapa d'imatge és un codi HTML que fa que l'usuari pot fer clic a les diferents àrees d'una imatge. El codi HTML que consisteix en el mapa etiqueta HTML, juntament amb l'etiqueta de zona, que li permet definir àrees amb formes rectangulars, poligonals i circulars.
A tall d'exemple, si vostè té la imatge image1.png a la seva pàgina HTML, pot escriure el següent codi:

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

Com es pot veure, cal establir l'atribut usemap a l'etiqueta img, que tindrà el mateix valor de l'atribut de nom al mapa d'etiquetes. Entre el <map> i </ map> es pot definir tants <area> etiquetes com vulgui, cadascun representant una àrea d'usuari pot fer clic a la imatge associada. Cada àrea ha de tenir un atribut de la forma, que pot tenir un dels 3 valors: rect, poli i del cercle. La forma rect està completament definit en 2 punts, una forma poli es defineix per una seqüència de punts i una forma de cercle està definit per un punt, que representa el centre, i un radi. Tots els punts es defineixen per un parell de coordenades, expressades en píxels, els familiars a la cantonada superior esquerra de la imatge. L'atribut de la forma també pot tenir el valor "default", que es refereixen a les parts de la imatge que no es van assignar amb qualsevol de les formes anteriors. Tenir en compte, en canvi, que l'ordre en què les formes es defineixen al mapa és molt important: si es defineix la forma "per defecte", com a primera forma al mapa, prevaldrà sobre totes les formes posteriors, a causa que el "default" forma es refereix a tota la imatge. Això és cert també amb les formes que se superposen entre si: pot definir una mica la forma en una forma més gran, però cal definir primer la petita forma i llavors el més gran. Si 2 formes comparteixen una porció de la imatge, la forma definida primer, guanya.

Si voleu configurar manualment un mapa d'imatge que has de saber les coordenades de tots els punts necessaris per definir les diferents formes. Probablement això no és un gran problema si vostè té poques àrees per mapejar, especialment si vostè té àrees circulars o rectangulars. Però si vostè té diverses àrees, amb una forma poligonal, ajust manualment no és una tasca senzilla.

L'eina d'imatge assignador li permet dibuixar formes com rect, poli, i el cercle en la imatge seleccionada, que es tradueixen automàticament en el codi HTML corresponent que fa que les àrees de la imatge d'usuari pot fer clic.

Després de dibuixar les formes en la imatge donada, pot generar el codi HTML simplement fent clic en un botó i el codi se li displayied en una àrea de text. Podeu copiar el codi HTML i utilitzar-lo en la seva pàgina (s) HTML. També es pot fer el procés invers: enganxar el codi HTML a l'àrea de text, pot carregar el codi només fer clic en un botó; això es tradueix en les formes en la imatge i es pot modificar, afegir noves formes i tornar a generar el codi HTML. Aquest mecanisme invers és útil perquè pugui guardar un procés de mapatge parcial i continuar per mapejar la imatge més tard. També és útil per refinar "manualment" la forma de disseny / posicionament: després de generar el codi en l'àrea de text, pot modificar les coordenades en l'àrea de text sobre la marxa i tornar a carregar.

Principals característiques:

  • Pots seleccionar una imatge local o remot
  • Podeu configurar la mida d'imatge de destinació: aquests són les mides que la imatge tindrà a la seva pàgina HTML
  • Pot apropar i allunyar la imatge en qualsevol moment i això no va a interferir amb les coordenades reals que es generaran, que depèn només de la mida de destinació de la imatge. La funció de zoom només és útil per ajudar a dibuixar les formes.
  • Podeu configurar diversos paràmetres per a cada forma, com l'atribut "href", l'atribut "alt", el "id" i "classe" atributs i, finalment, l'atribut "target". Per establir el paràmetre ha de seleccionar la forma: per seleccionar una manera que has de seleccionar la fletxa de la part superior esquerra de la barra d'eines i després feu clic a la forma.
  • Podeu establir alguns paràmetres per al mapa: mapa "nom", la url per defecte i l'objectiu.
  • Pot dibuixar una forma de seleccionar la forma d'una barra d'eines.
  • Per dibuixar una forma, després de seleccionar des de la barra d'eines, només ha de fer clic amb el ratolí sobre la imatge, en la qual desitja començar la forma.
  • Si la forma és un cercle, el punt coqueteja és el centre: moure el ratolí (clic o alliberada), es pot veure un cercle que segueix el cursor. En fer clic de nou el ratolí deixa de dibuixar el cercle.
  • Si la forma és un rect. el primer punt és una de la cantonada. En moure el ratolí (clic o alliberat) dibuixarà un rect. En fer clic de nou el ratolí deixarà de dibuix.
  • Si la forma és un poli que el procés és una mica diferent: cada clic del ratolí establirà un punt; el punt actual està sempre connectat amb el avets, fent que el poli sempre una forma tancada; deixar d'assenyalar a la poli (per ajustar l'últim punt) el que has de fer doble clic al ratolí.
  • Per a totes les formes també es pot deixar d'assenyalar-hi en fer clic al botó "stop" (la fletxa superior esquerra de la barra d'eines).
  • Vostè pot veure les coordenades del ratolí quan el mou a la imatge.
  • Podeu utilitzar la frontera puntejada de color gris al voltant de la imatge per a determinar les coordenades de les vores de la imatge, perquè pugui utilitzar la frontera, ja que era part de la imatge: així, vostè pot fer clic a la frontera durant el dibuix forma, jus, ja que va ser part de la imatge. Per exemple, si fa clic a la cantonada superior esquerra de la frontera, establirà un punt en (0, 0) coordenades. Si fa clic en la vora esquerra, en qualsevol punt, ha d'establir un punt en el (0, i) les coordenades, etc.
  • Podeu seleccionar una forma ja dibuixat i modificar / canviar la mida / eliminar-lo. Per treure vostè ha d'utilitzar la "goma" a la barra d'eines, que apareixerà com un llapis rebutjat solament seleccionar una forma.
  • Vostè pot seleccionar el color del contorn de les formes a partir d'un conjunt de 5 colors (això no és una eina de disseny, de manera que ha limitat el nombre de color i també no es pot triar un color diferent per a cada forma).
  • Pots fer clic al botó "mapa", és visible només quan es selecciona el botó "stop" a la barra d'eines i no hi ha forma és seleccionat: si vostè té algunes formes dibuixades a la imatge podràs veure el codi HTML en una àrea de text, si vostè encara no ha elaborat una forma veurà una àrea de text buida, però es pot passat en ella una mica de codi HTML i carregar-lo.
  • En fer clic al botó de "càrrega" (que es pot veure només després de fer clic al botó "mapa"), el codi HTML presents a l'àrea de text serà traduït en formes en la imatge.

Pot consultar el manual complet de l'eina en el següent enllaç: Manual en Línia

Si vostè té alguna pregunta, simplement deixar un comentari o envieu-me un correu electrònic!


Descarregar
Altres components d'aquesta categoriaTots els components d'aquest autor
Comentaris dels clientsPreguntes freqüents i respostes

Propietats

Creat:
Octubre 10 12

Darrera actualització:
N / A

Alta resolució:
Sense

Els navegadors compatibles:
Firefox, Opera, Chrome

Arxius inclosos:
JavaScript JS, HTML, CSS

Versió del programari:
HTML5

Paraules clau

eCommerce, eCommerce, Tots els Articles, aplicació, zona, lona, cercle, coordinar, html5, imatge, mapa, assignador, poli, rect, forma, objectiu, eina, zoom