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

Iscriviti al nostro feed per rimanere sempre aggiornato!

Nuovo! Seguici come lo vuoi!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Si tratta di una mappatura immagine html progettato per gli sviluppatori web.

Lo strumento è stato sviluppato utilizzando la tela HTML5, quindi il suo utilizzo è limitato ai browser che supportano la tela, ma anche l'API File di:

IE10 +, FF3.6 +, FF14-, FF18 + (il FF15 hanno problemi con alcune funzionalità di tela, Bug 787.623, che saranno risolti in FF18), Chrome6 +, Safari6 +, Opera11.1 +

Dal momento che questo è uno strumento per gli sviluppatori, credo che questo non è un grosso limite, perché suppongo che uno sviluppatore web non ha problemi a scegliere un browser appropriato.

Ho usato FF14 per sviluppare lo strumento, quindi questo è la scelta migliore, ma lo strumento è stato testato anche in Chrome22 e Opera12


Nota: la versione dello strumento che si può vedere nel link Live Preview, è una versione limitata dello strumento. Con questa versione è possibile caricare solo un insieme specifico di immagini, quotata sulla home page. Dopo aver caricato un'immagine è possibile disegnare tutte le forme, ma solo i primi 6 forme sarà generato nel codice HTML. Questa limitazione non impedisce di testare tutte le funzionalità dello strumento.


Che cosa è una mappa immagine?

Una mappa immagine è un codice HTML che rende dall'utente cliccabile diverse aree di un'immagine. Il codice HTML è costituito della mappa tag HTML, in collaborazione con l'etichetta zona, che consente di definire le aree con forme rettangolari, poligonali e circolari.
Ad esempio, se avete l'immagine image1.png nella pagina HTML, è possibile scrivere il seguente codice:

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

Come si può vedere, è necessario impostare l'attributo usemap nel tag img, che avrà lo stesso valore dell'attributo nome nel tag mappa. Tra la <map> e </ map> è possibile definire il numero di <area> tag che si desidera, ognuno dei quali rappresenta una area utente cliccabile sull'immagine associata. Ogni zona deve avere un attributo di forma, che può avere uno dei 3 valori: rect, poli e cerchio. La forma rect è completamente definita da 2 punti, una forma poly è definita da una sequenza di punti e un cerchio è definita da un punto, che rappresenta il centro, e un raggio. Tutti i punti sono definiti da una coppia di coordinate, espresse in pixel, parenti verso l'angolo in alto a sinistra dell'immagine. L'attributo forma può anche avere il valore "default", che si riferiscono alle parti dell'immagine non mappate con una qualsiasi delle precedenti forme. Prendere in considerazione, invece, che l'ordine in cui le forme sono definite nella carta sono molto importanti: se si definisce la forma di "default", come prima forma nella mappa, avrà la precedenza tutte le forme successive, perché il "default" Forma riferisce all'intera immagine. Questo è vero anche con le forme che si sovrappongono l'un l'altro: è possibile definire un po 'di forma in una forma più grande, ma è necessario definire prima la piccola forma e poi quello più grande. Se 2 forme condividono una parte dell'immagine, la forma definita prima, vince.

Se si desidera impostare manualmente una mappa immagine è necessario conoscere le coordinate di tutti i punti necessari per definire le diverse forme. Probabilmente questo non è un grosso problema se si dispone di alcune aree per mappare, soprattutto se si dispone di aree circolari o rettangolari. Ma se si dispone di diverse aree, con una forma poligonale, impostare manualmente non è un compito semplice.

Lo strumento immagine mapper permette di disegnare forme come rettangolo, poli, e cerchio sull'immagine selezionata, che saranno tradotti automaticamente nel corrispondente codice HTML che rende le aree dell'immagine dall'utente cliccabile.

Dopo aver disegnato le sagome sull'immagine dato, è possibile generare il codice HTML semplicemente cliccando su un pulsante e il codice sarà displayied in una textarea. È possibile copiare il codice HTML e utilizzarlo nella vostra pagina HTML (s). È anche possibile fare il processo inverso: incollando il codice HTML nella textarea, è possibile caricare il codice semplicemente cliccando un pulsante; questo sarà tradotto nelle forme sull'immagine ed è possibile modificare, aggiungere nuove forme e ri-generare il codice HTML. Questo meccanismo inverso è utile per consentire di salvare un processo di mappatura parziale e di continuare a mappare l'immagine successiva. E 'anche utile per affinare "manualmente" la progettazione forma / posizionamento: dopo aver generato il codice nella textarea, è possibile modificare le coordinate della textarea al volo e ri-caricarlo.

Caratteristiche principali:

  • È possibile selezionare un immagine locale o remota
  • È possibile impostare le dimensioni delle immagini di destinazione: queste sono le dimensioni che l'immagine avrà nella pagina HTML
  • È possibile ingrandire o rimpicciolire l'immagine in qualsiasi momento e questo non interferirà con le coordinate reali che saranno generati, che dipende solo dalle dimensioni di destinazione dell'immagine. La funzione di zoom è utile solo per aiutare a disegnare le forme.
  • È possibile impostare diversi parametri per ogni forma, come ad esempio l'attributo "href", l'attributo "alt", "id" e "di classe" attributi e, infine, l'attributo "target". Per impostare il parametro è necessario selezionare la forma: per selezionare una forma si deve selezionare la freccia in alto a sinistra nella barra degli strumenti e quindi fare clic sulla forma.
  • È possibile impostare alcuni parametri per la carta: la carta "nome", l'url di default e il bersaglio.
  • È possibile disegnare una forma selezionando la forma da una barra degli strumenti.
  • Per disegnare una forma, dopo averlo selezionato dalla barra degli strumenti, è sufficiente fare clic con il mouse sopra l'immagine, in cui si desidera iniziare la forma.
  • Se la forma è un cerchio, il punto flirta è il centro: spostando il mouse (clic o rilasciato), è possibile vedere un cerchio che seguono il cursore. Cliccando nuovamente il mouse interrompere il disegno del cerchio.
  • Se la forma è un rettangolo. il primo punto è uno degli angoli. Spostando il mouse (clic o rilasciati) disegnerà un rettangolo. Cliccando nuovamente il mouse smettere di disegnare.
  • Se la forma è un poli il processo è un po 'diverso: ogni clic del mouse fisserà un punto; il punto corrente è sempre collegata con quella abeti, rendendo il poly sempre una forma chiusa; smettere di disegnare la poli (per impostare l'ultimo punto) è necessario fare doppio clic sul mouse.
  • Per tutte le forme si può anche smettere di disegnare loro cliccando sul tasto "stop" (la freccia in alto a sinistra nella barra degli strumenti).
  • Potete vedere le coordinate del mouse quando si sposta sull'immagine.
  • È possibile utilizzare il bordo grigio-tratteggiato attorno all'immagine per determinare le coordinate dei bordi dell'immagine, in modo da poter utilizzare la frontiera come era parte dell'immagine: così, è possibile fare clic sul bordo durante il disegno forma, jus come faceva parte dell'immagine. Ad esempio, se si fa clic sull'angolo in alto a sinistra del confine, si imposterà un punto in (0, 0) coordinate. Se si sceglie il confine sinistro, in qualsiasi punto, si imposterà un punto alla (0, y), etc.
  • È possibile selezionare una forma già disegnato e modificare / ridimensionare / rimuoverlo. Per rimuoverlo è necessario utilizzare la "gomma" nella barra degli strumenti, che apparirà come una matita rifiutato solo la selezione di una forma.
  • È possibile selezionare il colore del contorno delle forme da una serie di 5 colori (non si tratta di uno strumento di progettazione, in modo da hanno limitato il numero di colore e, inoltre, non è possibile scegliere un colore diverso per ogni forma).
  • È possibile fare clic sul pulsante "mappa", che è visibile solo quando si seleziona il pulsante "stop" sulla barra degli strumenti e nessuna forma è selezionata: se si dispone di alcune forme disegnate sull'immagine potrete vedere il codice HTML in una textarea, se non avete ancora disegnato una forma che si vedrà una textarea vuoto, ma è possibile che in passato qualche codice HTML e caricarlo.
  • Cliccando sul pulsante "carico" (che si può vedere solo dopo aver cliccato sul tasto "map"), il codice HTML presente nella textarea sarà tradotto nelle forme sull'immagine.

È possibile consultare il manuale completo dello strumento al seguente link: Manuale in linea

Se avete domande, basta lasciare un commento o mi mandi una mail!


Scarica
Altri componenti di questa categoriaTutti i componenti di questo autore
CommentiDomande frequenti e risposte

Proprietà

Creato:
10 ott 12

Ultimo aggiornamento:
N / A

Alta risoluzione:
No

Browser compatibili:
Firefox, Opera, Chrome

File inclusi:
JavaScript JS, HTML, CSS

Software Version:
HTML5

Parole chiave

eCommerce, eCommerce, Tutti gli articoli, app, zona, tela, cerchio, coordinare, html5, Immagine, mappa, mapper, poli, rect, forma, bersaglio, strumento, zoom