Back to top

Autore Topic: [TIP] semplice rollover menu con joomla 1.6  (Letto 1824 volte)

Offline vinoalvino

  • Nuovo arrivato
  • *
  • Post: 46
    • Mostra profilo
[TIP] semplice rollover menu con joomla 1.6
« il: 11 Mag 2011, 00:14:26 »
Utilizzo un menu ad immagini e, secondo layout del cliente, i pulsanti del menu dovevano cambiare aspetto al passaggio del mouse. Dopo aver cercato qualche modulo per joomla 1.6 senza trovare qualcosa che mi soddisfacesse, ho realizzato una piccola modifica (che pubblico in bozza) che credo possa essere utile a tutti quelli che hanno il mio stesso problema. La soluzione è semplicissima (vale per 1.6, ma per 1.5 dovrebbe essere più o meno uguale):

Copiate il contenuto della cartella modules/mod_menu/tmpl in templates/[nome template]/mod_menu.
Editate il file templates/[nome template]/mod_menu/htm/default.php e inserite il seguente script

Codice: [Seleziona]
// Note. It is important to remove spaces between elements.
?>
<script type="text/javascript">
<!--hide from old browsers
function rollOn(obj){ obj.src=obj.src.replace(/.png/,'_roll.png');}
function rollOff(obj){ obj.src=obj.src.replace(/_roll.png/,'.png');}
-->
</script>

Lo script l'ho scritto di corsa, ma potrebbe essere migliorato notevolmente. Si compone comunque di due funzioni che cambiano il "src" dell'immagine a seconda dell'evento.

replace(/.png/,'_roll.png'); rimpiazza, ad esemipio, logo.png in logo_roll.png. Potete tranquillamente modificare a piacere queste righe (es: replace(/.jpg/,'_on.jpg'); o scrivere meglio lo script per renderlo insensibile all'estensione.

Editate il file  templates/[nome template]/mod_menu/htm/default_component.php e modificate la riga 19 con:

Codice: [Seleziona]
$linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" onmouseover="rollOn(this)" onmouseout="rollOff(this)"/>';
Non ho gestito il caso in cui all'immagine si voglia associare un testo in quanto il mio menu mostra il testo nel rollover.

Salvate il tutto.

Ora create un normale menu e, per ogni voce, nei parametri di "Opzioni tipo link" inserite un'immagine (creandone due: immagine.png e immagine_roll.png)

Aggiustando il css per il menu realizzato il gioco è fatto.




 



Web Design Bolzano Kreatif