Crea etichette di immagini interattive con qTip (jQuery Plugin)

Le immagini possono essere abbastanza senza vita e noiose, a meno che non siano interattive e fantastiche, cioè. E qTip lo rende facile, con la potenza di jQuery. Continua a leggere per scoprire come è possibile aggiungere etichette interattive visualizzate quando l'utente si posiziona su parti di un'immagine.

Perché vorresti farlo? Personalmente, sto utilizzando la tecnica in un nuovo sito di eCommerce, in modo che l'utente possa passare sopra gli elementi di una scena (come un catalogo Ikea), con il titolo del prodotto e il pulsante Aggiungi al carrello che appaiono dinamicamente. Potrebbe anche essere usato con buoni risultati su qualcosa come una mappa del campus o della città, dove ci sono molti elementi di forma strana che potrebbero davvero fare con una descrizione senza ingombrare la mappa. Un esempio molto semplice sarebbe anche i tag di Facebook, in cui il passaggio del mouse sul volto di una persona ti dirà chi sono. I suoi usi sono limitati solo dalla tua immaginazione.

Nota: sto presupponendo una conoscenza di base di jQuery e HTML qui - almeno assicurati di aver letto sui selettori jQuery Tutorial - Per iniziare: Nozioni di base e selettori jQuery Tutorial - Per iniziare: Nozioni di base e selettori La settimana scorsa, ho parlato di Quanto è importante jQuery per qualsiasi sviluppatore web moderno e perché è fantastico. Questa settimana, penso che sia ora che ci sporchiamo le mani con del codice e abbiamo imparato come ... Per saperne di più, metodi Introduzione a jQuery (Parte 2): Metodi e funzioni Introduzione a jQuery (Parte 2): Metodi e funzioni Questo fa parte di un introduzione dei principianti in corso alla serie di programmazione web jQuery. La prima parte riguardava le nozioni di base di jQuery su come includerla nel tuo progetto e selettori. Nella parte 2, continueremo con ... Ulteriori informazioni e funzioni anonime Introduzione a jQuery (parte 3): in attesa della pagina per caricare e funzioni anonime Introduzione a jQuery (parte 3): in attesa della pagina per caricare e funzioni anonime jQuery è probabilmente una competenza essenziale per il moderno sviluppatore web, e in questa breve miniserie spero di darti le conoscenze per iniziare a farne uso nei tuoi progetti web. In ... Per saperne di più .

qTIP

qTip è un tooltip completo e un plugin di etichettatura per jQuery, con una varietà di stili. Lo useremo specificatamente con la funzionalità della mappa immagine, ma non è tutto ciò che può fare. Dai un'occhiata alla pagina del plugin per saperne di più o continua a leggere per iniziare.

Fare una mappa di immagini

Le mappe immagine di per sé non sono certo una novità - gli elementi di markup sono disponibili da molto tempo, e nel lontano giorno è stato effettivamente considerato un buon modo di presentare un sistema di navigazione - con parti cliccabili dell'immagine che collegano a sezioni diverse . Lo stesso codice mappa immagine di base è ancora utilizzato per quella parte della funzionalità, quindi dovremo prima definirlo.

Puoi usare una varietà di strumenti per creare una mappa immagine - Adobe Fireworks o Photoshop - ma la soluzione più semplice e gratuita è uno strumento online come questo. Non è certamente l'unico strumento online e non lo apprezzo in modo particolare, ma sembrava abbastanza semplice da usare: facci sapere nei commenti se ne trovi uno migliore. È possibile definire forme rettangolari, circolari o persino poligonali.

Inizia caricando un'immagine: in questo caso, assegnerò un'etichetta al sito Web MakeUseOf. Potrebbe essere necessario ridurre lo zoom per visualizzare l'immagine completa nello strumento.

Dovrebbe essere abbastanza ovvio come usarlo come un programma di pittura di base - l'unica cosa da ricordare è che quando si disegna una forma poligonale, è necessario tenere premuto SHIFT sull'ultimo punto per chiudere e terminare. Qui ho definito 4 forme.

Quando sei pronto, scorri verso il basso e copia il codice indicato.

Crea un nuovo documento HTML di base e ripulisci il codice un po ', aggiungendo un tag immagine per puntare all'immagine originale. Il modo più semplice per fare ciò è usare un JSFiddle. Ecco il mio esempio, nel suo stato iniziale (il set di codice finale è dato in seguito, non ti preoccupare).

Ricordati di dare l'immagine a usemap attributo, che punta a #id della mappa contenente le coordinate (usemap =”#mymap”, per esempio).

Aggiunta in qTip

Se hai incollato il tuo codice su JSFiddle, vedrai che c'è un'opzione nella barra laterale per includere jQuery. Assicurati di abilitarlo. Possiamo anche aggiungere altre risorse esterne qui, quindi andare avanti e aggiungere gli URL per CSS e JS elencati nella pagina di download di qTip. Copia e incolla il “tutte le caratteristiche e stili” link in JSFiddle - anche se in pratica, dovresti usare lo strumento di configurazione sotto per costruire un set personalizzato di funzioni o stili.

La guida all'implementazione completa per qTip può essere trovata qui, ma lascia andare avanti e creare alcune semplici descrizioni basate sul testo. Il seguente Javascript indirizzerà tutti gli elementi dell'area (gli elementi che definiscono le parti della nostra mappa immagine) al caricamento della pagina, indicando a qTip di lavorare su di essi con il contenuto di qualsiasi cosa si trovi nell'attributo alt.

 $ (document) .ready (function () $ ("area"). each (function (index, element) var link = $ (this); $ (link) .qtip (content: link.attr (" alt ")););); 

Il design predefinito è piuttosto brutto - puoi vederne una demo qui - ma va bene, applichiamo un design personalizzato ai popup come questo (Ho omesso parte del codice, mostrando solo la sezione specifica qTip).

$ (link) .qtip (content: link.attr ("alt"), style: classes: 'qtip-bootstrap qtip-shadow'); 

Ho anche incluso il file CSS BootStrap come un file esterno, per ordinare i caratteri del browser standard brutti. Questo è molto eccessivo, lo so. Ancora: molto meglio!

Una cosa che ora noto è che la posizione predefinita in basso a destra non è proprio l'ideale. Per regolarlo, usiamo l'impostazione della posizione:

$ (link) .qtip (content: link.attr ("alt"), style: classes: 'qtip-bootstrap qtip-shadow', posizione: target: 'mouse', regolare: mouse: true / / Può essere omesso (es. Comportamento predefinito)); ); 

Ora passa con il mouse su qualsiasi elemento e il suggerimento seguirà il tuo mouse. Puoi vedere la demo finita qui.

Puoi anche creare il popup modale (in modo che tutto il resto venga disattivato, e devi fare clic all'esterno per tornare ad esso), o anche caricare in alcuni contenuti tramite una richiesta AJAX. Penso che sia un piccolo plug-in abbastanza carino che trasmette una nuova vita in uno standard HTML inutilizzato - vediamo cosa si può inventare, e fatecelo sapere nei commenti se avete fatto qualcosa con esso.

Scopri di più su: jQuery, portfolio online, condivisione di foto.