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

Aboneaza-te la feed-ul nostru pentru a rămâne până la data!

Nou! Urmați- ne cum vrei!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Aceasta este o cartografiere imagine HTML conceput pentru dezvoltatori web.

Instrumentul a fost dezvoltat folosind panza HTML5, astfel încât utilizarea sa este limitată la browsere care susțin panza, dar, de asemenea API fișier:

IE10 +, FF3.6 +, FF14-, FF18 + (The FF15 au probleme cu unele funcționalități panza, Bug 787623, care vor fi rezolvate în FF18), Chrome6 +, Safari6 +, Opera11.1 +

Deoarece acesta este un instrument pentru dezvoltatori, cred că acest lucru nu este o limitare mare, pentru că presupun că un dezvoltator web are nici o problema de a alege un browser adecvat.

Eu am folosit pentru a dezvolta FF14 instrumentul, astfel încât acesta este cel mai bun buna alegere, dar instrumentul a fost testat, de asemenea, în Chrome22 și Opera12


Notă: Versiunea a instrumentului pe care le puteți vedea în link-ul Live Preview, este o versiune limitată a instrumentului. Cu această versiune puteți încărca doar un set specific de imagini, listate pe pagina de start. După încărcarea unei imagini Puteți desena toate formele, dar numai primele 6 forme va fi generat în codul HTML. Această limitare nu împiedică să testați toate funcționalitățile instrumentului.


Ce este o harta imagine?

O harta imagine este un cod HTML care face ca se poate face clic de utilizator diferite zone ale unei imagini. Codul HTML constă în harta HTML tag-ul, în colaborare cu tag-ul zona, care vă permite să definiți zone cu forme dreptunghiulare, poligonale si circulare.
Ca un exemplu, dacă aveți imaginea image1.png în pagina HTML, puteți scrie codul de mai jos:

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

După cum puteți vedea, trebuie să setați atributul usemap in tag-ul img, care va avea aceeași valoare a atributului name în harta tag. Între <harta> și </ MAP> puteți defini cât mai multe <zona> tag-uri, după cum doriți, fiecare reprezentând o zonă se poate face clic-utilizator pe imaginea asociata. Fiecare zonă trebuie să aibă un atribut formă, care pot avea unul din cele 3 valori: rect, poli și cerc. Forma indirecta este definită complet de 2 puncte, o formă poli este definită printr-o secvență de puncte și o formă de cerc este definit de un punct, care reprezintă centrul, și o rază. Toate punctele sunt definite de un cuplu de coordonate, exprimată în pixeli, rudele la colțul din stânga sus a imaginii. Atributul formă poate avea, de asemenea, valoarea "default", care se referă la părțile din imaginea nu mapate cu oricare din formele anterioare. Să ia în considerare, în schimb, că ordinea în care formele sunt definite în harta sunt foarte importante: dacă definiți "default" forma ca prima formă în hartă, ea va suprascrie toate formele ulterioare, pentru că "implicit" Forma se referă la întreaga imagine. Acest lucru este valabil, de asemenea, cu formele care se suprapun reciproc: puteți defini o formă puțin într-o formă mai mare, dar trebuie să definească mai întâi puțin forma și apoi mai mare. Dacă 2 forme împărtășesc o porțiune a imaginii, forma definită primul, câștigă.

Dacă doriți să setați manual o hartă imagine trebuie să știi coordonatele tuturor punctelor necesare pentru a defini forme diferite. Probabil că acest lucru nu este o problemă mare, dacă aveți câteva zone de hartă, mai ales dacă aveți zone circulare sau dreptunghiulare. Dar, dacă aveți mai multe domenii, cu o formă poligonală, setați-le manual nu este o sarcină simplă.

Instrumentul mapper de imagine vă permite să elaboreze forme, cum ar fi rect, poli, și cerc pe imaginea selectată, care vor fi traduse în mod automat în codul HTML corespunzător care face zonele din imagine user-se poate face clic.

După desen formele pe imaginea dat, puteti genera codul HTML pur și simplu clic pe un buton, iar codul va fi displayied într-un textarea. Puteți să copiați codul HTML și să-l utilizați în pagina dvs. HTML (e). Puteți face, de asemenea procesul invers: lipirea codul HTML în textarea, puteți încărca acest cod simplu clic pe un buton; acest lucru va fi tradus în formele pe imaginea si le poate modifica, adăuga noi forme și re-genera codul HTML. Acest mecanism inversă este utilă pentru a vă permite să salvați un proces de cartografiere parțială și de a continua la harta imaginea mai târziu. De asemenea, este util pentru a rafina "manual", a formei de proiectare / poziționare: după generarea codul în textarea, puteți modifica coordonatele din textarea pe zbor și re-încărcați-l.

Caracteristici principale:

  • Puteți selecta o imagine local sau la distanță
  • Puteți seta dimensiunile imaginii țintă: acestea sunt dimensiunile care imaginea va avea în pagina HTML
  • Puteți mări sau micșora imaginea in orice moment și acest lucru nu va interfera cu coordonatele reale care vor fi generate, care depinde numai de dimensiunile țintă ale imaginii. Caracteristica de zoom este folositor doar pentru a vă ajuta să atragă formele.
  • Puteți seta mai mulți parametri pentru fiecare formă, cum ar fi "href" atributul, atributul "alt", "Codul" și "clasa" atributele și în cele din urmă atributul "țintă". Pentru a seta parametrul trebuie să selectați forma: pentru a selecta o formă trebuie să selectați săgeata din stânga-sus în bara de instrumente și apoi faceți clic pe forma.
  • Puteți seta unele parametri pentru harta: harta "numele", implicit URL-ul și obiectivul.
  • Puteți desena o forma selectarea forma de la o bara de instrumente.
  • Pentru a desena o formă, după selectarea-l din bara de instrumente, pur și simplu puteți să faceți clic cu mouse-ul pe imagine, în cazul în care doriți să începeți forma.
  • În cazul în care forma este un cerc, punctul de Firts este centrul: se deplasează mouse-ul (clic pe sau eliberat), puteți vedea un cerc care urmează cursorul. Un nou click pe mouse-ul se va opri desen cercul.
  • În cazul în care forma este un rect. primul punct este unul din colț. Mutarea mouse-ul (clic pe sau eliberat) va desena un rect. Un nou click pe mouse-ul se va opri desen.
  • În cazul în care forma este un poli procesul este un pic diferit: fiecare clic al mouse-ului se va stabili un punct; punctul curent este întotdeauna conectat cu cel brazi, ceea ce face poli întotdeauna o formă închisă; pentru a opri pentru a trage poli (pentru a seta ultimul punct) trebuie să faceți dublu clic pe mouse-ul.
  • Pentru toate formele puteți opri, de asemenea, pentru a trage-le faceți clic pe butonul "stop" (săgeata din stânga-sus în bara de instrumente).
  • Puteti vedea coordonatele mouse-ul atunci când vă muta pe imagine.
  • Puteți utiliza frontiera gri-punctată în jurul imaginii pentru a determina coordonatele marginea imaginii, astfel încât să puteți utiliza frontiera ca a fost parte a imaginii: astfel, puteți să faceți clic pe la granița în timpul desenului forma, jus cum a fost o parte a imaginii. De exemplu, dacă faceți clic pe colțul din stânga sus a frontierei, va stabili un punct de (0, 0) coordonează. Dacă faceți clic pe-malul stâng, în orice moment, va stabili un punct de la (0, y) coordonează, etc.
  • Puteți selecta o formă deja trase și modifica / redimensiona / scoateți-l. Pentru a elimina, trebuie să utilizați "cauciuc" în bara de instrumente, care va apărea ca un creion refuzat doar selectarea o formă.
  • Puteți selecta culoarea conturului formele dintr-un set de 5 culori (acest lucru nu este un instrument de proiectare, așa că am limitat numărul de culoare și, de asemenea, nu se poate alege o culoare diferită pentru fiecare formă).
  • Puteți face clic pe butonul "harta", care este vizibila doar atunci când selectați butonul "stop" din bara de instrumente și nu forma este selectat: dacă aveți unele forme desenate pe imaginea, veți vedea codul HTML într-un textarea, dacă nu ați atras încă o formă, veți vedea un textarea gol, dar puteți trecut în ea un cod HTML și încărcați-l.
  • Făcând clic pe butonul "încărcare" (pe care le puteți vedea doar după ce faceți clic pe butonul "harta"), codul HTML prezent în textarea va fi tradus în forme pe imagine.

Puteți consulta manualul completă a sculei la link-ul următor: manualul on-line

Dacă aveți orice întrebări, doar lăsa un comentariu sau drop-mi un e-mail!


Descărcați
Alte componente din această categorieToate componentele acestui autor
ComentariiÎntrebări frecvente și răspunsuri

Proprietăți

Creat:
10/10/12

Ultima actualizare:
N / A

Rezoluție înaltă:
Nu

Browsere compatibile:
Firefox, Opera, Chrome

Fișiere incluse:
JavaScript JS, HTML, CSS

Versiune software:
HTML5

Cuvinte cheie

eCommerce, eCommerce, Toate produsele, app, zonă, pâ, nză, cerc, coordona, HTML5, imagine, hartă, mapper, poli, rect, shape, țintă, instrument, zoom