css Zen Garden
The Beauty of CSS Design
Chi pensa che un CMS non possa avere un design gradevole ed originale non conosce Joomla! Qualsiasi template può essere adattato e fatto funzionare con Joomla! |
| Menù con immagini rollover |
Come realizzare un menù con immagini rollover in Joomla ?Per effetto rollover si intende come è noto, il cambio dell'immagine al passaggio del mouse sopra il menù, ad evidenziare che si tratta di un link cliccabile. Dopo aver trattato dell'inserimento di piccole icone nel menù in questo articolo vediamo adesso di affrontare l'inserimento di immagini nei nostri menù, con quel gradevole effetto rollover che renderà le nostre voci cliccabili simili a pulsanti. Per far questo utilizziamo un modulo realizzato da Emanuele Ferrarini un utente del forum di joomla.
Vediamo adesso in questo tutorial come configurare il modulo in un paio di modi ma devo dire che il modulo stesso è molto versatile e può essere utilizzato in molte altre maniere. Intanto, dopo averlo scaricato nel nostro computer lo installiamo dal pannello di controllo di Joomla! da Estensioni e poi Installa/Disinstalla. Quindi caricheremo il nostro modulo. Al termine comparirà il messaggio che è stato correttamente installato. Prima di andare a configurarlo dobbiamo andare in Menu e quindi in Gestione menù dove creeremo il menù da associare al modulo Imagemenu. Creare il menù
Si presti attenzione al nome che mettiamo nel box Tipo menu perchè ci servirà in seguito. Ricordo che deve essere un nome univoco, che non deve quindi esser dato a nessun altro menù, e che deve essere scritto senza spazi. Creato che abbiamo il nostro nuovo menù dobbiamo realizzare le singole voci di menù e quindi associarle ad una immagine, che ci saremo procurati o che avremo realizzato noi con un programma di grafica. A questo punto metteremo le immagini dentro la cartella images/stories di Joomla! e andremo a creare le voci di menù associando a ciascuna voce una della immagini che abbiamo inserito scegliendola nei Parametri-sistema quando creiamo la voce di menù, nel box a discesa. Mettiamo che il nostro menù sia composto da tre voci. Dovremo avere tre immagini che chiamiamo image1.jpg , image2.jpg e image3.jpg e altre tre che chiamiamo image1_over.jpg, image2_over.jpg e image3_over.jpg , sempre dentro la cartella images/stories di Joomla!. Queste ultime tre sono quelle che il modulo imagemenu andrà a prendersi quando passeremo sopra alla voce di menù con il mouse.
Configurare il modulo
Andiamo quindi adesso in Estensioni e poi su Gestione moduli a configurare il nostro modulo. Individuato, lo apriamo cliccandoci sopra, vedremo sulla destra i parametri da configurare. Lasciamo su si la scelta per l'effetto rollover. Nel suffisso ci mettiamo la parte del nome che abbiamo aggiunto alla seconda immagine rispetto alla prima e quindi _over. In Colonne e Righe le colonne e le righe di cui abbiamo bisogno e in Menu il nome univoco del menù che abbiamo creato prima che è imagemenu. Nella larghezza e altezza possiamo mettere dei valori che forzeranno la dimensione delle immagini. Ma se le immagini sono della giusta dimensione possiamo lasciare tutto in bianco. E' possibile inserire anche il suffisso modulo nei parametri avanzati allo scopo di far prendere la formattazione degli altri moduli menù del sito. Quindi nel mio caso inserirò in quel campo _menu dovendolo utilizzare nel template rhuk_milkyway e volendo fare assumere anche a questo modulo i caratteristici bordi arrotondati Potete vedere in questa demo il modulo imagemenu in azione.
Creare un menù con immagini rollover da inserire in una pagina di Joomla!
Adesso che abbiamo creato un classico menù con immagini rollover posizionato normalmente sulla colonna sinistra o destra del template proviamo a fare una cosa un pò diversa inserendo una immagine composta con diverse immagini oppure anche composta da una sola immagine sezionata in diverse parti. Per ottenere questo non dovremo fare altro che seguire le istruzioni per creare un modulo. Se lo abbiamo già fatto possiamo duplicarlo per crearne un altro. Quindi settare i parametri che nei casi delle demo sono per la tabella di 2 colonne e 2 righe. Poi dovremo avere l'accortezza di pubblicarlo in una posizione che creiamo in quel momento scrivendola direttamente dentro il box delle posizioni del modulo. Mettiamo che scriviamo lì dentro centrale. Non ci resta infine che pubblicarlo nella pagina dove vogliamo che appaia con il classico codice loadposition centrale messo tra le parentesi graffe. Questo modulo funziona proprio a meraviglia, è molto versatile, facile da settare e si visualizza bene con ogni browser non utilizzando script particolari od oggetti flash. Puo essere duplicato ed inserito anche in diverse copie nella stessa pagina esattamente come tutti gli altri moduli menù. Se nelle vostre immagini compare un fastidioso bordo, che con internet explorer è viola/blu, basterà che incolliate questo codice nel vostro css. Solitamente il file si chiama template .css e sta dentro la cartella CSS del vostro template: img a { Nota del 6 luglio 2009: questo modulo aveva in origine il problema del mancato riconoscimento di assegnazione di un modulo o di un template ad una voce di menù. Adesso il problema è stato risolto dall'autore e la versione che scaricate da qui funziona alla perfezione. Nota del 27 marzo 2010: non mi ero accorto che con la modifica di cui sopra non è più possibile inserire in imagemenù url esterni al sito, essendo che ci aggiunge in fondo gli itemid. In attesa di risolvere metto nell'area download anche il modulo prima versione. Nota del 04 luglio 2010: se con php 5.3 il modulo smette di funzionare e vi segnala un errore dovete aprire il file helper.php e cercare questa stinga circa a riga 35:
e sostituirla con questa:
|
Commenti
Piccola modifichina che spero possa essere utile.
Ciao :)
se cancello la cartella mod_Imagemanu puo succedere qualcosa di grave?
se hai qualche consiglio sono bene accetti.
grazie
ho istallato il modulo e funziona correttamente, solo che non riesco a modificare il css del menu, nello specifico sto cercando di eliminare il bordo blu attorno al pulsante ma non ci riesco.
img a {
border: none;
}
ma non funge... :(
come vedi ci sono anche dei quadrati neri, in quanto dopo aver provato a far scomparire il bordo ho provato a cambiarlo, però come si vede se creato un ulteriore rettangolo esterno che non rispetta i contorni dell'immagine.
Se stai usando furebug per vedere il css vedrai:
img a {
border: medium none;
}
nel foglio di stile ti assicuro che medium non cé
img {
border: none;
}
Quanto al medium sono cose che aggiunge firebug...
grazie
puoi dirmi se il menù è accessibile, ovvero validato xhtml?
grazie della risposta, buona giornata,
Andrea
Non conosco PHP ma ho modificato il file HELPER.PHP del modulo sosituendo i comandi della tabella con dei div, e la cosa sembra funzionare.
Il problema però è che il modulo crea delle img con e dato che la definizione "name" non è accetto, solo per quest'ultimo punto il modulo non è validato!
E' possibile (e come fare a) sostituire l'attributo name con ID?
Grazie molte per le indicazioni che riuscirai a darmi!
Andrea
Grazie della risposta Tony.
Non conosco PHP ma ho modificato il file HELPER.PHP del modulo sosituendo i comandi della tabella con dei div, e la cosa sembra funzionare.
Il problema però è che il modulo crea delle img con ' name=""chqw_img_0" ' e dato che la definizione "name" non è accettato, solo per quest'ultimo punto il modulo non è validato!
E' possibile (e come fare a) sostituire l'attributo name con ID?
Grazie molte per le indicazioni che riuscirai a darmi!
Andrea
bastava modificare name con id nel medesimo file. la pagina ora è validata!.
Grazie molte del tuo aiuto!
Andrea
La provo e ti faccio sapere.
Mi accodo al problema dell'url ridondante con il codice &itemid.
Quello che mi pare strano è che nella tua demo tutto funziona alla perfezione (il link tonicopi/brutto :) punta ad un (tuo) sito esterno, se non sbaglio);
Segnalo anche che non mi funziona il tipo "separatore": viene inserito comunque un link (quello della home page) con in fondo l'itemid.
Ciao e grazie!
Adesso metto in download anche la vecchia versione di image menù...
$pippo="0";
global $mainframe;
$db =& JFactory::getDBO();
$query = "SELECT id,link, params, name FROM #__menu WHERE menutype='$men' AND published=1 ORDER BY ordering" ;
$db->setQuery($query);
$rows = $db->loadObjectList();
foreach ( $rows as $row )
{
if ($pippo == "1")
{
$menu['link'][$pippo]= "nome link esterno";
$menu['nome'][]=$row->name;
$parametri=$row->params;
$as=array();
$as= explode ("\n", $parametri);
foreach ($as as $a)
{
if (preg_match ("/menu_image/" , $a))
{
list($pre, $immagine)=explode ("=", $a);
$menu['immagine'][]=$immagine;
}
}
}
else
{
$menu['link'][]= $row->link."&Itemid=".$row->id;
$menu['nome'][]=$row->name;
$parametri=$row->params;
$as=array();
$as= explode ("\n", $parametri);
foreach ($as as $a)
{
if (preg_match ("/menu_image/" , $a))
{
list($pre, $immagine)=explode ("=", $a);
$menu['immagine'][]=$immagine;
}
}
}
$pippo++;
ho installato il modulo nella vecchia versione e funziona correttamente.
Ho solo un dubbio: ho provato ad impostare dall'amministra zione le voci di menu in modo tale che aprissero i link in una nuova finestra, ma purtroppo si aprono sempre nella stessa finestra....come mai?
Grazie x l'aiuto!!! Ciao. Cristina
Scaricalo e sostituisci il tuo file modules/imagemenu/helper.php
" Alè!!!
ebbene si, è andata. ho modificato 2 righe e è a posto. o perlomeno legge gli ItemId.
ecco la nuova riga 23:
$query = "SELECT id,link, params, name FROM #__menu WHERE menutype='$men' AND published=1 ORDER BY ordering" ;
ed ecco la nuova riga 28:
$menu['link'][]= $row->link."&Itemid=".$row->id;
nel forum di joomla il file patch zip (qui non lo posso importare)
Martedì 30 Giugno 2009, 17:34
Quale usare? Grazie.
Questo che c'entra con la modifica di Emanuele che è già stata inserita nel modulo image menu che scarichi da qui?
Riepiloghiamo: l'attuale versione di image menu riconosce gli itemid ma in questo modo non si possono inserire url esterni al sito.
La vecchia versione (image menu old) non riconosce gli itemid ma consente di inserire sia link esterni che interni al sito.
Il file qui sopra lo puoi utilizzare per sovrascrivere qualsiasi di queste due versioni. Ma se lo fai aprirai i link sia interni che esterni sempre in una nuova pagina e non riconosce gli itemid.
Un altra domanda (che spero non ti fa arrabbiare): si può utilizzare (installare) tutte 2 le versioni di imagemenu nello stesso sito? Grazie per la tua pazienza.
La regola vuole che non si faccia mai abbandonare ad un potenziale cliente il sito...Potrebbe non tornare più. :-(
Non puoi non risolvere questa cosa, è un modulo che per raggiungere la perfezione ha assoluto bisogno di questa cosa...
ho installato il tuo imagemenu e ho rilevato questo strano (almeno per me) comportamento:
1) ho selezionato alcune voci di menù come registered o special e compaiono comunque anche se non loggati
2) le icone/immagini del menù nel mio template vengono nascoste in parte dal banner appena sotto (www.veronalive.it)
ti sarò eternamente grato se mi potrai dare qualche utile consiglio ;-)
Ho provato ad inserire l'URL nella modalità che tu hai descritto (con l'http://), ma continua a non funzionare correttamente!!!
Hai qualche suggerimento? Grazie. Ciao. Cristina
Devi inserire l'url di questo tipo: http://www.tuosito.it e non www.tuosito.it
ho visto nel tuo esempio sul modulo impostato in un articolo che facendo click sulla foto si apre una foto ingrandita.
Volevo ottenere questo:
visto che le foto in rollover sono piccole, si possono ingrandire facendo click sopra?
grazie
Io uso le immagini png, però rimane il tremendo sfondo viola segnalato da altri come "bordo" viola... come fare?
img a {
border: none;
}
Ora provo!
scusa se riesco a rispondere solo ora... ma sono giornate lavorative "da manicomio".
Si, tra l'altro avevo visto che il tema era già stato affrontato e risolto "qualche riga più in sù"... come sempre, basta leggere con più calma :-)
Cmq ancora grazie e complimenti per ciò che fai!
Cordialmente.
Giò.
complimenti per il modulo che trovo molto valido. Unica cosa che non riesco ad eliminare è un bordo blu che automaticamente compare attorno alle immagini.
Il menù che ho realizzato è composto da tre voci, per motivi di template la dimensione dello stesso è 630 x 200 e le immagini sono 210 x 200 ciascuna (sia normali che _over) così che affiancate orizzontalmente coprono esattamente i 630 di lunghezza.
Ho cercato ovunque anche nei css del template tra impostazioni border, link, visited, ecc., ma nulla.
Grazie in anticipo per qualunque suggerimento e un cordiale saluto. Giò.
a img {
border:none;}
Davvero bello ti ringrazio molto e ti seguo sempre
Carmen
Vorrei tanto risolvere questo problema. Ma non riesco a creare le voci di menu la mia versione di Joomla è l'ultima, mi aiuti per favore?
Grazie Carmen
Ad eswmpio mettiamo che io come immagine di rollover abbia messo la stessa immagine Sottolineata in rosso, clicco sull' item e vado alla pagina , e mentre ci navigo dentro rimane visibile nel menu l' immagine sottolineata in rosso.
Il problema sta nel fatto che il modulo crea dei bordi attorno alle immagini di colore viola che non riesco ad eliminare.
Visto che è un menu roolover, non vedo il perche debba inserire questi fastidiosi bordi.
img a {
border: none;
}
Ciao
andrea
ho un solo problema: come fare perchè il pulsante rimanga HOVER una volta cliccato ed aperta la pagina corrispondente?
uso JOOMLA da non molto e forse mi sfugge qualcosa!
grazie e complimenti,
andrea
Vi chiedo un aiuto perchè ho l'impressione di essermi incartato.
ho installato il modulo imangemenu ,ma non riesco ad ottenere l'effeto desiderato cioè quello visto nella dismostrazione di Toni,ho seguito alla "lettera "l'esemplificazi one, sicuramente sbaglio ma non capisco dove ,anche se poi sembra molto semplice spiegato da Toni. Allora vi chiedo una volta creato il menu vado su gestione voci di menu poi nuovo ,dovrei trovare in selezione tipo di voce di menu imagemenu ? oppure no. grazie saluti
alberto
grazie alla tua precisazione ho risolto ,(mi ero perso).Ti seguo sempre con molta simpatia, ed apprezzo molto quello che scrivi ,quando vedo il tuo nome sotto un articolo mi affretto a leggerlo perchè sono sicuro che hai cose interessanti da farci sapere .(OT:complimenti hai delle bellissime nipotine)
grazie cordialmente Alberto
ebbene si, è andata. ho modificato 2 righe e è a posto. o perlomeno legge gli ItemId.
ecco la nuova riga 23:
$query = "SELECT id,link, params, name FROM #__menu WHERE menutype='$men' AND published=1 ORDER BY ordering" ;ed ecco la nuova riga 28:
$menu['link'][]= $row->link."&Itemid=".$row->id;nel forum di joomla il file patch zip (qui non lo posso importare)
Io ho avuro problemi cercando di creare un link a sito esterno.
Il modulo mi accoda l'itemId, e quini il link http://www.example.com mi veniva alterato dal modulo come http://www.example.com?&itemId=xx, dove xx è il numero dell'item appunto.
Io ho modificato riportando il codice così:
$menu['link'][]= $row->linkCiao,
Nando
questo:
$menu['link'][]= $row->link."&Itemid=".$row->id;
e questo:
$menu['link'][]= $row->link
come faccio?
Quindi se volete risolvere il problema scaricatevi di nuovo il modulo e sovrascrivete il vostro file helper.php
In più ripeto la domanda di Antonello "Io avrei bisogno di entrambi i link, interno ed esterno:, come faccio?"
http://www.joomlacsszengar den.com/demo/index.php?option=com_remository&Itemid=7&func=fileinfo&id=48
In questo ci puoi inserire sia i link esterni che quelli interni.