Rollover menu

Rollover menu

Ciao, sono arrivato ad un bel problema.
vorrei sostituire a dei link delle immagini con effetto rollover...

c'è qualche anima pia che potrebbe aiutarmi?

non riesco a capire come si possa fare...
grazie!

Gio, 14/01/2010 - 19:00

posso suggerirti 2 sistemi
1)immagini di sfondo inserite con i CSS:

#id_voce_menu {background-image: url(images/sfondo.jpg);}
#id_voce_menu:hover {background-image: url(images/rollover.jpg);}

2) usare JS con le immagini inline:

<a href="/percorso/link"><img src="/percorso/sfondo.jpg" onmouseover="javascript:this.src='/percorso/rollover.jpg'" onmouseout="javascript:this.src='/percorso/sfondo.jpg'" /></a>

i miei 2c al metodo 1, per usabilità e pulizia del codice ... ma anche perchè di JS ne so molto poco! ;)

Gio, 14/01/2010 - 20:30

grazie per la tua risposta:

però:
#id_voce_menu sarebbe questo?
#menu-403 primary-links?

Perchè ho provato ma non funziona..

potresti essere un pò più chiaro??

Grazie

Gio, 14/01/2010 - 21:05

Quote:
#menu-403 primary-links?

si, è quello.
è ~~l'id~~ la class della voce di menu ed è unica. quindi una regola css applicata a #.menu-403 dovrebbe essere sufficientemente specifica.
assicurati che:
- il file css sia caricato
- le immagini siano presenti nella cartella appropriata
- i percorsi dei file siano corretti
- non ci siano altre regole css che interferiscano con la tua (ad es background-image:none)
mi sembra di essere stato chiaro. se hai bisogno di altro aiuto, posta uno snippet del css e/o del codice html comunica quale tema/moduli usi, eccetera

Gio, 14/01/2010 - 20:49

#primary-links {
  position: relative;
  display: block;
  height:25px;
  width:378px;
  float: none;
  margin-left: auto;
}
#primary-links ul{
  padding-right: 45px;
  padding-left: 45px;
  margin-right: -35px;
  list-style:none;
  float: right;
}
#primary-links ul li {
  display:inline;
}
#primary-links ul li a {
  padding-right: 11px;
  padding-left: 10px;
  font: 10px/13px Verdana, Arial, Helvetica, sans-serif;
  color: #00FFCC;
}
#primary-links ul li a:hover {
  color: #000000;
}
#menu-403 primary-links {
  background-image: url('images/chisono.jpg');
}

ok questo è il mio codice css...mi sembra che sia tutto a posto però è come se non mi leggesse la classe del menù...

Gio, 14/01/2010 - 21:06

.menu-403 primary-links

così non significa nulla!
cosa è primary-links? una class o un ID
prova a lasciare solo

.menu-403{background-image: url(images/chisono.jpg);}

e leva gli apostrofi attorno al percorso dell'immagine

Gio, 14/01/2010 - 20:56

risolto :-)

invece di mettere

#menu-403 {
  background-image: url('images/chisono.jpg');
}

ho dovuto mettere

.menu-403 {
  background-image: url('images/chisono.jpg');
} 

Grazie Mille!!!
Era una stupidata in effetti ;-))))

GRAZIE

Gio, 14/01/2010 - 21:06

...ho toppato anche io. hehe
ho corretto i commenti errati