jQuery - Tooltip Fumetto

google-plus Scritto da . Postato in Joomla!

Nella creazione di un sito, trattasi di website realizzato con un CMS come Joomla!, WordPress o statico, a volte si ha necessità di usare una mappa o cartina come strumento per la ricerca o di reindirizzamento del visitatore ad aree o pagine specifiche.

Un esempio di ciò di cui sto parlando lo ho realizzato su www.vivitrentino.eu

HTML: il tag map

Il linguaggio HTML mette a disposizione il tag <map></map> nel quale annidati i tag <area></area> identificano le zone calde della mappa, immagine o qualunque cosa desideriamo legare ad un link.
Fin qui nulla di difficile. Infatti strumenti automatizzati come Dreamweaver o Microsoft Frontpage permettono di creare queste aree sulla mappa in maniera rapida grazie a funzioni apposite dove l'utente non fa altro che creare una ad una le aree semplicemente delineandone i punti con una serie di click del mouse.

Mettendo il caso di voler aggiungere una descrizione alle aree, le scelte possono essere diverse. Link messi in contenitori <div></div> poi appositamente posizionati attraverso regole CSS o più semplicemente scritte integrate nell'immagine.
Più elegante e meno oneroso, può essere la scelta di tooltip che al passaggio del mouse appaiano come un fumetto riportante il nome dell'area sul quale passiamo (hover).

jQuery UI-Tooltip

Le liberie javascriptjQuery UI (User Interface), integrano un sistema molto semplice per creare un sistema tooltip utilizzabile all'interno del nostro sito. Per attivarlo su un semplice link basterà utilizzare questa semplice sintassi che potete vedere dal sito ufficiale. Una volta attivato, qualsiasi attributo title, sarà mostrato come tooltip al passaggio del mouse sull'oggetto a cui appartiente.

Vediamo ora come sposare il sistema jquery tooltip sui tag area annidati un un tag map.

1. Inseriamo i riferimenti alle jQuery

Per poter utilizzare questo sistema sulla mappa e le aree in essa contenute, il codice è poco più complesso. Il richiamo alle librerie è sempre lo stesso (su Joomla! non dovrebbe essere necessario in quanto integra nativamente le librerie mootools e jQuery. Fatelo solo se necessario). basterà inserirle all'interno del tag <head> della pagina:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

L'immagine che ci serve per creare il fumetto che apparirà con il tooltip la potete scaricare da qui. Ne potete utilizzare un'altra a vostro piacimento.

2. Aggiunta delle classi CSS

Aggiungete inoltre queste classi CSS al vostro foglio di stile (se usate Joomla! consiglio di aggiungerle al file custom.css o override.css del template):

.ui-tooltip {
    color:#fff;
    text-align:center;
    padding: 4px;
    position: absolute;
    z-index: 9999;
    width: 100px;
    height: 45px;
    background: url(/images/black_arrow.png);
}

body .ui-tooltip {

    border-width: 0px;
}

Se le inserite direttamente nella pagina ricordate che vanno tra tag <style></style> all'interno anch'esse del tag <head>.

3. Inserite il codice javascript...

...sempre all'interno del tag <head>:

<script type="text/javascript">
jQuery(document).ready(function($) {

        $("#trentino").find("area").tooltip({
            position: "center left",
            tipClass: "tooltip",
            offset: [50,100]        
        });

        $(document).mouseover(function(evt){
            $("[class*=\"tooltip\"]").css("left",evt.pageX - 50).css("top",evt.pageY - 60);
        });
});
</script>

4. Inserimento dell'immagine e del tag map associato

Inserite l'immagine e la <map></map> associata creata con l'editor HTML nella pagina (in Joomla! basterà inserirlo all'interno di un modulo HTML Personalizzato e metterlo nella posizione desiderata):

[accordion] [item title="Esempio"]

<img style="margin-left:10px;margin-top:10px;" src="/images/trentino.png" alt="mappa trentino" width="350" height="292" border="0" usemap="#trentino" />
<map name="trentino" id="trentino">
<area shape="poly" coords="262,103,267,108,273,109,273,121,280,126,278,135,289,134,298,141,298,151,303,148,312,149,320,144,329,144,337,127,345,126,344,119,336,109,337,102,324,100,317,87,317,73,309,74,308,67,301,67,301,78,294,84,295,93,292,95,282,98,276,99,267,98" href="#" target="_self" alt="Primiero" title="Primiero" id="Primiero" />
<area shape="poly" coords="207,172,212,188,226,188,233,181,250,178,255,183,257,190,266,192,276,197,281,190,275,183,280,170,283,155,291,149,294,142,288,137,276,137,269,127,269,113,257,107,248,110,236,124,226,126,221,128,213,129,217,136,201,164" href="#" target="_self" alt="Tesino" title="Tesino" id="Tesino" />
<area shape="poly" coords="196,92,203,98,213,116,214,123,219,126,226,121,234,121,245,106,254,105,263,93,277,94,290,92,288,86,290,78,288,73,267,70,260,53,255,56,254,63,235,61,222,70,218,79,210,80,214,88,198,87" href="#" target="_self" alt="Val di Fiemme" title="Val di Fiemme" id="Val di Fiemme"/>
<area shape="poly" coords="264,53,270,64,290,67,295,73,295,64,315,56,320,39,331,37,329,30,316,24,317,9,304,14,288,15,276,15,269,24" href="#" target="_self" alt="Val di Fassa" title="Val di Fassa" id="Val di Fassa" />
<area shape="poly" coords="162,188,165,188,168,192,172,196,183,200,187,206,189,202,201,209,206,202,211,202,206,189,201,179,203,169,196,165,212,141,206,128,208,116,201,116,192,124,185,126,176,136,169,142,163,141,169,156,169,170,161,176,161,183" href="#" target="_self" alt="Valsugana" title="Valsugana" id="Valsugana" />
<area shape="poly" coords="121,193,113,185,116,168,109,160,121,141,114,138,114,130,102,122,113,113,124,113,144,102,151,100,157,88,163,93,173,93,171,101,177,105,192,95,204,110,197,112,187,123,183,122,176,134,170,134,159,136,159,148,164,158,164,169,159,172,157,178,157,184,150,185,143,190,131,185" href="#" alt="Val d'Adige" title="Val d'Adige" id="Val d'Adige" />
<area shape="poly" coords="94,248,96,256,89,275,98,277,103,287,113,284,117,284,122,276,134,279,147,287,164,272,163,254,164,242,173,231,175,221,180,210,176,198,166,200,162,192,149,188,145,195,130,189,119,205,108,213,103,216,105,219" href="#" target="_parent" alt="Vallagarina" title="Vallagarina" id="Vallagarina"/>
<area shape="poly" coords="40,232,36,224,39,220,39,214,52,204,61,189,80,193,88,196,103,181,110,169,109,185,119,198,110,203,103,211,95,216,101,221,94,241,73,231,66,234,52,233,42,233" href="#" target="_self" alt="Garda e Ledro" title="Garda e Ledro" id="Garda e Ledro" />
<area shape="poly" coords="39,237,37,241,31,239,21,248,16,248,15,237,10,237,14,205,8,193,10,185,1,176,5,171,8,157,21,137,25,122,22,113,26,106,37,103,43,107,50,107,56,98,63,99,86,88,96,98,100,105,98,124,103,133,110,134,109,140,113,143,108,156,102,156,106,165,100,170,99,177,91,183,87,192,63,184,46,198,35,210,31,223" href="#" target="_self" alt="Giudicarie" title="Giudicarie" id="Giudicarie" />
<area shape="poly" coords="105,44,95,25,107,25,120,17,129,17,143,29,136,9,144,1,162,17,171,11,177,25,175,39,172,54,169,68,156,82,142,98,123,106,108,109,102,113,100,95,105,82,115,65,129,45,111,42,105,43" href="#" target="_self" alt="Val di Non" title="Val di Non" id="Val di Non" />
<area shape="poly" coords="95,28,105,46,113,44,128,45,121,56,110,68,105,75,103,85,100,94,86,86,73,88,63,94,53,99,45,102,38,101,23,101,29,88,25,82,25,73,19,63,12,58,14,53,26,47,42,37,39,33,35,23,47,23,63,17,68,12,80,21,84,26" href="#" target="_self" alt="Val di Sole" title="Val di Sole" id="Val di Sole" />
</map>

[/item] [/accordion]

Il codice finora mostrato, dovrebbe funzionare praticamente ovunque. Anche su una semplice pagina HTML.

Se invece si ha bisogno di inserirlo ad esempio in un articolo di Joomla!, e non avete idea di come fare, ecco un ulteriore suggerimento:

Inserimento del codice in Joomla! con Jincludes

Per inserirlo all'interno della pagina di Joomla! basterà fare uso di un plugin simile a jincludes.
Questo plugin è molto utile se dovete inserire codice nelle vostre pagine. Permette inclusioni di qualsiasi tipo. Basta scrivere il codice all'interno di uno degli spazi appositi messi a disposizione e darvi un nome.
L'inclusione si fa in moduli o articoli semplicemente richiamando {{nomesnippet}} nella posizione desiderata.

Ecco come utilizzarlo nel nostro caso:

  1. Installate e abilitate il plugin Jincludes.
  2. Inserite in uno snippet (spazio per il codice che trovate nel plugin) di tipo codice PHP il codice:

    [accordion][item title="Joomla! code"]

        $document = &JFactory::getDocument(); 
        $document->addStyleSheet('//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css');
    $document->addScript('//code.jquery.com/jquery-1.10.2.js');

        $document->addScript('//code.jquery.com/ui/1.11.2/jquery-ui.js');
        $document->addScriptDeclaration(
        'jQuery(document).ready(function($) {
            $("#trentino").find("area").tooltip({
                position: "center left",
                tipClass: "tooltip",
                offset: [50,100]        
            });

            $(document).mouseover(function(evt){
                $("[class*=\"tooltip\"]").css("left",evt.pageX - 50).css("top",evt.pageY - 60);
            });
        });');

    [/item][/accordion]

  3. Create poi un articolo vuoto e cliccando su [Toggle editor] inserite in esso nella posizione da voi preferita: {{nomesnippet}}.
  4. Seguito dal codice che rappresenta la vostra mappa (al punto 4).
  5. Salvate l'articolo e richiamatelo dove desiderate visualizzare la mappa.

Il risultato sarà simile a questo:

mappa trentino Primiero Tesino Val di Fiemme Val di Fassa Valsugana Val d'Adige Vallagarina Garda e Ledro Giudicarie Val di Non Val di Sole

Buon divertimento!

Se hai gradito l'articolo, condividilo, basta un click!

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo prontopro
  • logo boutique serramento
  • koilab japan and tropical fish farm
  • Trasloco economico - gruppo Arco Traslochi
  • logo flash pulizie
  • logo revolution
  • logo planetkoi small
  • logo finiture
  • ick logo template
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. La nostra Privacy Policy è cambiata: Ti invitiamo a prenderne visione. Oppure visiona la nostra Cookie Policy: