Per chi non avesse la pazienza di leggere, o per chi semplicemente non è italiano, o per gli autori di Jcrop, qui sotto c’è un elenco di link in cui i linguaggi sono universali:  html, javascript (jQuery) e qualche proprietà di css.

• esempio base
• inserire le aree
• visualizzare le aree inserite
• esempio con shapes disegnate
• trigger dell’evento release

DOWNLOAD

DEMOS

IL TAG MAP

Il tag map, e il “sottotag” area permettono di “disegnare” link all’interno di un immagine.

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>

Qui c’è un esempio di utilizzo.

LIMITI DEL TAG MAP

Il limite principale di questo tag è a mio modo di vedere l’impossibilità di applicare stili ai tag “AREA” presenti all’interno.
In pratica l’unico indizio visivo del link all’interno di una certa porzione di immagine, che viene dato all’utente, è il cursore.
Non è possibile anche solo applicare bordi.
Tutto questo fondamentalmente perchè il tag map permette di creare aree di tipo “rect” (e non sarebbe un problema per un browser disegnarne il bordo), “circle”, “poly”.
Quindi il browser dovrebbe saper disegnare (canvas).

Altro limite, ma non direttamente del tag, è la difficoltà di scrivere le coordinate.

ALTERNATIVE AL TAG MAP

Listapart ci aveva già pensato, e suggerisce di creare qualcosa di completamente diverso. Javascript legge una lista, disegna dei punti in posizione assoluta, e al click (o al mouseover) visulizza un tooltip.

L’idea è quella.

Siccome il mio problema comunque, era di dare in mano ad un redattore uno strumento per inserire i punti, ho iniziato a fare scouting di plugins che disegnassero aree sopra un’ immagine.

JQUERY JCROP

Ecco che arrivo a Jcrop.

Jcrop è un plugin jQuery principalmente pensato per tagliare immagini.

Inizialmente non pensavo di usarlo come sostituto dei tag map/area.

Pensavo solo di usare le coordinate che restuitiva, salvarle nel database e successivamente creare le aree lato “frontoffice” leggendo dal database le coordinate salvate dal redattore della mappa.

Quindi l’avevo scelto come strumento di backoffice.

Qui un semplice utilizzo di Jcrop con le coordinate restituite in campi form.

JCROP COME SOSTITUTO DEL TAG MAP

Alla fine anche per la presentazione ho deciso di provare ad utilizzare il plugin.

Questo è il risultato.

Una serie di link presi da una lista con le coordinate passate via metadata.

L’implementazione è  semplice (anche se le coordinate non sono proprio user-frendly).

L’ESEMPIO BASE

Il container:

<div class="jcropmap"></div>

L’immagine:

<img src="img/italia2006.jpg" alt="italia2006" />

La lista di aree:

<ul>
	<li><a class="{coords : [33,111,75,176,42,65]}" href="#">Gattuso</a></li>
    <li><a class="{coords : [93,104,144,180,51,76]}" href="#">Pirlo</a></li>
    <li><a class="{coords : [171,103,224,183,53,80]}" href="#">Zambrotta</a></li>
    <li><a class="{coords : [245,102,318,191,73,89]}" href="#">Camoranesi</a></li>
    <li><a class="{coords : [326,100,397,190,71,90]}" href="#">Cannavaro</a></li>
    <li><a class="{coords : [402,98,456,174,54,76]}" href="#">Perrotta</a></li>
    <li><a class="{coords : [410,14,464,90,54,76]}" href="#">Totti</a></li>
    <li><a class="{coords : [345,7,399,83,54,76]}" href="#">Grosso</a></li>
    <li><a class="{coords : [274,4,328,80,54,76]}" href="#">Toni</a></li>
    <li><a class="{coords : [211,4,265,80,54,76]}" href="#">Barzagli</a></li>
    <li><a class="{coords : [149,2,203,78,54,76]}" href="#">Buffon</a></li>
</ul>

Il JS NELL’HEAD:

jQuery(window).load(function(){
	jQuery(".jcropmap").jcropmap();
});

NB:

non ci sono regole forti per questo plugin per la struttura html. L’ importante è scegliere una classe o un id per il wrapper container e richiamarla nell’head quando si avvia il costruttore. All’interno di questo wrapper ricordarsi solo che i link vengono cercati all’interno di un ul, e l’immagine DEVE avere come classe jcropbox (sovrascrivibile da opzione).

CREARE LE AREE

Visto che non è proprio semplice scrivere le coordinate delle aree, ho creato una demo con una banale gestione della sessione.

Questa demo non è un plugin.

E’ solo uno spunto per crearsi la propria gestione dei link.

Sarà quindi necessario implementare un servizio che ad esempio salvi le informazioni su db.

VISUALIZZARE IL RISULTATO

Una volta inserite le coordinate nella demo precedente, potrete vedere il risultato dei vostri “tag” qui.

EXTRA : SHAPES, OPTIONS, RELEASE

Ho aggiunto anche la possibilità di visualizzare le aree all’interno del “viewport” di Jcrop, e di sovrascrivere le opzioni che vengono passate. Un esempio.

Qui invece mostro come ho agganciato il metodo release dell’oggetto costruito all’interno del plugin (click sul body).

Non è una tecnica pulitissima. Ma nemmeno quella di Jcrop mi sembra elegante.

FEEDBACK

Se ci sarà un certo riscontro a questo post, magari versionerò il plugin, esporrò meglio le opzioni, e magari anche un API pubblica di metodi.

Fino ad allora per maggiori informazioni o chiedete qui postando un commento, oppure guardate il codice sorgente.