Autore Topic: [RISOLTO] Menų ad immagini con rollover  (Letto 8839 volte)

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
[RISOLTO] Menų ad immagini con rollover
« il: 13 Mag 2011, 15:47:01 »
Ciao.
Ho un problema con un menų di joomla (1.6).
Vorrei creare un menu fatto ad immagini e ho scoperto che esiste  all'interno della voce del menu stesso, una voce "opzioni tipo link" che da la possibilitā di associare un'immagine alla voce di menu.
Il problema č che vorrei che queste immagini avessero un rollover e uno stato diverso quando si č dentro alla pagina del menų selezionato.

Esiste una funzione che mi premette di automatizzare tutto? oppure devo fare un modulo html personalizzato per il menu e inserire i vari comportamenti col css?

Grazie in anticipo.
Antonella
« Ultima modifica: 13 Giu 2011, 09:09:44 da antodesign »

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:Menų ad immagini con rollover
« Risposta #1 il: 13 Mag 2011, 15:52:22 »
dal mio punto di vista il modo pių semplice č quello di farlo dal CSS. basta usare i selettori :hover e :active...senza modulo html
Il grande fratello ti osserva!! difendi la tua privacy

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
Re:Menų ad immagini con rollover
« Risposta #2 il: 16 Mag 2011, 15:54:29 »
mmmm, scusa ma allora non ho capito, come inserisco i pulsanti se non in un modulo html?
e come posso dirgli di mostrarmi l'immagine che dico io quando č dentro alla pagina cliccata?
Quindi non solo uno stato rollover ma anche uno stato premuto.
Spero di essermi spiegata.
Grazie

Antonella

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:Menų ad immagini con rollover
« Risposta #3 il: 16 Mag 2011, 17:13:33 »
lascia perdere il modulo html, per fare i menu ci sono i moduli appositi.

per impostare il rollover e la voce attiva basta usare le pseudo classi ":hover" e ":active" dei css.

http://www.w3schools.com/css/sel_hover.asp
http://www.w3schools.com/Css/sel_active.asp

oppure usi un modulo di questi
http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/image-menus
Il grande fratello ti osserva!! difendi la tua privacy

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
Re:Menų ad immagini con rollover
« Risposta #4 il: 17 Mag 2011, 14:25:06 »
Grazie e scusami se sono pesante ma ancora non capisco bene.
Ho capito come realizzare lo stato delle immagini (link, hover, active) ma non capisco dove devo applicare lo stile.
Devo creare il menų nella gestione menų e poi ad ogni voce associare un css con i vari stadi oppure devo muovermi in un altro modo? per esempio creare un nuovo DIV dentro al template index.php?
Oppure come?
Spero di essermi spiegata.
Scusami davvero ma č la prima volta che mi capita un'esigenza simile.
Grazie ancora.

Antonella

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:Menų ad immagini con rollover
« Risposta #5 il: 17 Mag 2011, 20:05:56 »
non ti devi scusare... siamo qui per aiutare ed essere aiutati  :)
anzi scusami te se sono sembrato brusco.

Citazione
Devo creare il menų nella gestione menų e poi ad ogni voce associare un css con i vari stadi oppure devo muovermi in un altro modo? per esempio creare un nuovo DIV dentro al template index.php?

hai giā tutto. devi solo aggiungere delle classi CSS nel fogliio di stile.
metti un suffisso CSS al menu, in modo da diversificarlo da tutti gli altri, poi scrivi una cosa del genere
Codice: [Seleziona]
ul .menu_suffisso li:hover {...........}
ul .menu_suffisso li:active {...........}

se mi posti il link del sito ti faccio un esempio concreto
ciao
Il grande fratello ti osserva!! difendi la tua privacy

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
Re:Menų ad immagini con rollover
« Risposta #6 il: 01 Giu 2011, 10:56:12 »
Ciao, grazie per la gentilezza, non sei stato per nulla brusco.
Sono riuscita a creare uno stile apposito per ogni voce di menu e mi funziona il rollover! unica cosa č che non va lo stile "acrive" ovvero quando clicco sul pulsante per un attimo mi appare l'immagine che ho scelto per questo stato ma quando poi rilascio il mouse mi viene tolta.

Grazie ancora
Antonella

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:Menų ad immagini con rollover
« Risposta #7 il: 01 Giu 2011, 13:03:20 »
posta il link pls
Il grande fratello ti osserva!! difendi la tua privacy

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
Re:Menų ad immagini con rollover
« Risposta #8 il: 01 Giu 2011, 14:06:00 »
scusa, mi sono dimenticata di dire che il sito lo sto lavorando in locale quindi non riesco a postare il link.

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:Menų ad immagini con rollover
« Risposta #9 il: 01 Giu 2011, 14:29:43 »
prova a controllare se la voce attiva prende un id o una classe particolare (di solito #current o .active) e semmai usali per definire una nuova regola.
Il grande fratello ti osserva!! difendi la tua privacy

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
Re:Menų ad immagini con rollover
« Risposta #10 il: 03 Giu 2011, 14:46:39 »
Ciao, non mi torna ancora :(
Credo di avere fatto in modo di verso rispetto a quello che mi dici tu, io praticamente ho fatto un nuovo foglio di stile:

.home  {
   width:54px;
      height:29px;
      background:  url(../images/menu/pulsanti_03.png) ;

}

.home:visited {
      background:  url(../images/menu/pulsantih_03.png) ;
      width:54px;
      height:29px;

}

.home:hover {
      background:  url(../images/menu/pulsantih_03.png) ;
      width:54px;
      height:29px;

}
.home:active {

      background:  url(../images/menu/pulsantih_03.png) ;

}


e poi, nel pannello di amministrazione, nella finestra che si apre quando clicchi sulla voce del menu ho scritto home nella voce stile link css.

questo perchč poi voglio che ogni voce di menu abbia un colore diverso rispetto agli altri quando ci vai sopra ed entri nella pagina, non č giusta cosė la procedura?

Ancora grazie!
Antonella

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:Menų ad immagini con rollover
« Risposta #11 il: 03 Giu 2011, 21:20:30 »
no non ci siamo....

quell'"_home" che inserisci nel suffisso del modulo non č cosė che si usa.
il suffisso va a finire come suffisso appunto, di una classe giā presente nel template, che potrebbe essere .moduletable

quindi diventerebbe

.moduletable_home {...........}

per cui per l'active e hover diventerebbe qualcosa di simile

.moduletable_home li a:hover{...........}
.moduletable_home li a:active{...........}

Il grande fratello ti osserva!! difendi la tua privacy

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
Re:Menų ad immagini con rollover
« Risposta #12 il: 06 Giu 2011, 08:25:12 »
Ciao, grazie della risposta.
Sono riuscita a fare quello che dici tu e lo stile funziona, ho applicato al modulo questo nuovo suffisso ed č ok, il problema č che io ho varie voci di menu dentro a quel menu/modulo e ad ognuna volevo assegnare una immagine rollover/active diversa, facendo cosė invece, essendo lo stile unico mi mette la stessa immagien di sfondo in tutte le voci di menu.

Grazie
Ciao
Antonella

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:Menų ad immagini con rollover
« Risposta #13 il: 06 Giu 2011, 12:30:16 »
in questo caso devi analizzare le voci di menu con firebug. ognuna dovrebbe avere una classe o id univoco che puoi usare per differenziare le immagini

per esempio

.moduletable_home li.item2 a:hover{...........}
.moduletable_home li.item2 a:active{...........}
Il grande fratello ti osserva!! difendi la tua privacy

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
Re:Menų ad immagini con rollover
« Risposta #14 il: 06 Giu 2011, 16:06:05 »
Ciao, grazie ancora.
Ho creato le sotto classi ma associando lo stile test al mio menų ancora nonmi funziona nulla.
Ti posto il codice:
Codice: [Seleziona]
#topmenu .menu_prodotti {
  background-image: url(../images/menu/pulsanti_04.png);
list-style: none;
font-weight: normal;
font-size: 14px;
padding: 0;
margin: 0;
}

#topmenu .menu_prodotti li a {
  background-image: url(../images/menu/pulsanti_04.png);
display: block;
text-decoration: none;
padding: 0;
}

#topmenu .menu_prodotti li {
  background-image: url(../images/menu/pulsanti_04.png);
    float: left;
padding: 0;
}
#topmenu .menu_prodotti li.active a {
  background-image: url(../images/menu/pulsantih_04.png);

}
#topmenu .menu_prodotti li a:hover {
  background-image: url(../images/menu/pulsantih_04.png);

}



#topmenu .menu_prodotti li.test a:active {
  background-image: url(../images/menu/pulsantih_02.png);

}
#topmenu .menu_prodotti li.test a:hover {
  background-image: url(../images/menu/pulsantih_02.png);

}

Ho messo poi, all'interno ad una voce di un menu (per esempio home) nel campo "stile Link CSS" il valore "test".

Cosa sbaglio?

Grazie mille.
Antonella

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:Menų ad immagini con rollover
« Risposta #15 il: 06 Giu 2011, 16:23:29 »
prova con


#topmenu .menu_prodotti li a.test {

}
Il grande fratello ti osserva!! difendi la tua privacy

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
Re:Menų ad immagini con rollover
« Risposta #16 il: 07 Giu 2011, 09:34:37 »
Ancora nulla  :-\
Ho inserito questo codice
 
Codice: [Seleziona]
#topmenu .menu_prodotti li a.chisiamo {
 background-image: url(../images/menu/pulsanti_04.png);
 height:29px;
}

#topmenu .menu_prodotti li a.chisiamo:hover,active {
 background-image: url(../images/menu/pulsantih_04.png);
}

e il rollover funziona correttamente ma non tiene lo stato active.

Grazie
Antonella

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:Menų ad immagini con rollover
« Risposta #17 il: 07 Giu 2011, 13:08:42 »
Codice: [Seleziona]
#topmenu .menu_prodotti li a.chisiamo {
 background-image: url(../images/menu/pulsanti_04.png);
 height:29px;
}

#topmenu .menu_prodotti li a.chisiamo:hover,
#topmenu .menu_prodotti li a.chisiamo:active {
 background-image: url(../images/menu/pulsantih_04.png);
}
Il grande fratello ti osserva!! difendi la tua privacy

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
Re:Menų ad immagini con rollover
« Risposta #18 il: 07 Giu 2011, 13:51:08 »
Grazie perō ancora nulla, proprio lo stato active non me lo piglia  :-\

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:Menų ad immagini con rollover
« Risposta #19 il: 07 Giu 2011, 16:08:43 »
prenditi uno spazio hosting gratuito e metti online il sito, altrimenti non ne usciamo.
Il grande fratello ti osserva!! difendi la tua privacy

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
Re:Menų ad immagini con rollover
« Risposta #20 il: 08 Giu 2011, 13:49:14 »
Ciao, faccio un ultimo tentativo caricando due immagini con el schermate dell'amministrazione.
Mi sorge il dubbio che non metto nel giusto posto il link al css.

Come prima cosa questa č la schermata di come ho applicato lo stile al modulo


E qui come ho applicato lo stile personalizzato ad ogni singola voce di menu.
Mi viene il dubbio che sbaglio ad applcare quest'ultima anche perchč nella singola voce di menų mi appare poi anche il titolo del pulsante in maniera testuale (vedi altra img sotto) e io avendolo ad immagine lo vorrei togliere ma da questa finestra non ne sono ingrado.



Grazie ancora per la super pazienza!
Antonella

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:Menų ad immagini con rollover
« Risposta #21 il: 08 Giu 2011, 19:24:16 »
allora... proviamo cosė:
per ogni voce di menu metti in "stile link css" una parola diversa

ad esempio per home scrivi "stile_home"

e nel css


questo per le voci attive
Codice: [Seleziona]
ul.menu li.active a.stile_home:link, ul.menu li.active a.stile_home:visited{
color:red;
}


questo per le voci non attive
Codice: [Seleziona]
ul.menu li a.stile_home:link, ul.menu li a.stile_home:visited{
color:green;
}

...e cosė via per ogni voce di menu
Il grande fratello ti osserva!! difendi la tua privacy

Offline antodesign

  • Appassionato
  • ***
  • Post: 202
    • Mostra profilo
Re:Menų ad immagini con rollover
« Risposta #22 il: 13 Giu 2011, 09:08:53 »
Ci sono finalmente riuscita!
Sono riuscita col 1° metodo mettendo perō questo codice css:
Codice: [Seleziona]
#topmenu .menu_prodotti li a.home {
 background-image: url(../images/menu/pulsanti_03.png);
 height:29px;
 width:54px;
}
#topmenu .menu_prodotti li a.home:hover,
#topmenu .menu_prodotti li.active a.home {
 background-image: url(../images/menu/pulsantih_03.png);
width:54px;

Ti ringrazio di cuore per tutto l'aiuto che mi hai dato e spero di poter ricambiare in caso tu ne abbia bisogno.
Sei stato davvero gentientile!
Antonella

Offline GoldenGreenHouse

  • Nuovo arrivato
  • *
  • Post: 3
    • Mostra profilo
Re:[RISOLTO] Menų ad immagini con rollover
« Risposta #23 il: 11 Lug 2011, 20:58:29 »
Ciao! Sono nuovo del Forum!
Ho letto i vostri post e ho risolto anche io il problema :)
Volevo perō chiedere:
- mi si visualizza l'immagine di sfondo (background-image) e quella dell'hover, ma rimane il link visibile (classica scritta blu sottolineata) e il puntino di elenco (classico dei menu joomla).

...come faccio al eliminarli e visualizzare solo lo sfondo?!?
Almeno il puntino :)

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
Re:[RISOLTO] Menų ad immagini con rollover
« Risposta #24 il: 11 Lug 2011, 21:59:44 »
benvenuto GoldenGreenHouse,

metti il link del tuo sito cosė ti diciamo cosa e dove modificare.



Il grande fratello ti osserva!! difendi la tua privacy

 

Host

Torna su