Immagine diversa al rollover per ogni voce di menu

M

moncicci

Nuovo Utente
4 Gen 2005
8
0
0
Ciao a tutti! io ho questo menu nella pagina principale (in .php):
HTML: 
<div id="menu"> 	
<ul> 		
<li><a href="#" class="current">Home Page</a></li> 		
<li><a href="#">About</a></li> 		
<li><a href="#">Music</a></li> 		
<li><a href="#">Photo</a></li> 		
<li><a href="#">Contact</a></li>								 
</ul> </div>
e questo css:
#menu{
margin:0 30px 10px 90px; }
#menu ul{ list-style:none; }
#menu li{list-style:none;display:block;float:left;margin:0 3px; padding:4px;border:1px solid #ccc;background:#fff; }
#menu li a{ display:block; float:left; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold;background:#2f2f31; padding:15px 35px; text-decoration:none; }
#menu li a:hover{
display:block; float:left; background:#49740d url(../images/gradient1.jpg) no-repeat center top; text-decoration:none; }
#menu li a.current{ display:block; float:left; color:#fff;
text-transform:uppercase; font-size:11px; font-weight:bold; padding:15px 35px; background:#49740d url(../images/gradient1.jpg) no-repeat center top; text-decoration:none; }
Clicca per allargare...

La mia necessità è che, nella fase di rollover, sia visualizzata un'immagine diversa per ogni voce di menu (e che la scritta della voce scompaia se possibile).
Come dovrei modificare il css? Grazie mille! :)
 
micio86

micio86

Utente Attivo
15 Mar 2011
287
0
0
37
peschiera borromeo (MI)
www.laserpunch.tk
Mmmmm..

HTML: 
<div id="menu"> 	
<ul> 		
<li><a href="#" class="current">Home Page</a></li> 		
<li><a href="#" class="about">About</a></li> 		
<li><a href="#" class="music">Music</a></li> 		
<li><a href="#" class="photo">Photo</a></li> 		
<li><a href="#" class="contact">Contact</a></li>								 
</ul> </div>

Nel css

HTML: 
#menu{
  margin:0 30px 10px 90px; 
}
#menu ul{ list-style:none; }
#menu li{list-style:none;display:block;float:left;margin:0 3px; padding:4px;border:1px solid #ccc;background:#fff; }
#menu li a{ display:block; float:left; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold;background:#2f2f31; padding:15px 35px; text-decoration:none; }
#menu li a .about:hover{
display:block; float:left; background:#49740d url(../images/gradient1.jpg) no-repeat center top; text-decoration:none; }
#menu li a .music:hover{
display:block; float:left; background:#49740d url(../images/gradient2.jpg) no-repeat center top; text-decoration:none; }
#menu li a .photo:hover{
display:block; float:left; background:#49740d url(../images/gradient3.jpg) no-repeat center top; text-decoration:none; }

#menu li a.current{ display:block; float:left; color:#fff;
text-transform:uppercase; font-size:11px; font-weight:bold; padding:15px 35px; background:#49740d url(../images/gradient1.jpg) no-repeat center top; text-decoration:none; }

Non so se va ma l'idea è questa.
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
silvia88 ***Help*** - Anteprima immagine photoshop diversa da file Photoshop 3
L Immagine diversa a seconda del db PHP 0
C Visualizzare un'immagine diversa a seconda di giorno ed ora Javascript 1
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
gara1 inserire immagine di sfondo in canvas Javascript 0
T Dividere un'immagine in 3 parti orizzontali e salvarle separatamente Photoshop 2
W Immagine come maschera photoshop Photoshop 1
L Ultima immagine Windows e Software 0
A Immagine decentrata con sfondo trasparente Photoshop 0
A Scontornare immagine di bassa qualità. Photoshop 2
B Selezionare un'immagine e salvare la selezione Photoshop 3
F Immagine come fosse selezione attiva Photoshop 1
Y Percorso assoluto file immagine HTML e CSS 9
K Come posso usare un'immagine al posto di un bottone? HTML e CSS 2
M Upload immagine con javascript problemi con FormData() Javascript 1
M Visulizzare immagine con php PHP 8
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 7
L Come caricare un'immagine in Canvas dinamicamente Javascript 0
R Cambiare il nome dell'immagine dopo caricamento ftp HTML e CSS 0
L salvare una immagine elaborata in canvas Javascript 1
L salvare una immagine elaborata in canvas Javascript 1
Y Come caricare e visualizzare un'immagine PHP 0
S Testo scrolla su immagine che cambia HTML e CSS 0
M Quando ha l'immagine ingrandita è possibile fare rotazione per ritagliare? Photoshop 0
R Caricamento immagine su cartella remota + mysql PHP 3
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
L Upload di un'immagine all'interno di un database usando php PHP 6
G Modifica immagine di sfondo attraverso un bottone PHP 18
F photoshop portable : spostamento immagine Photoshop 0
A Server Apache immagine not found (ERROR 404) Apache 5
P [Photoshop] ritagliare una immagine Photoshop 1
S [PHP] Recupero nome immagine da Form con input file PHP 3
D [Javascript] salvare immagine canvas - paypal Javascript 0
D [HTML] Inviare un link contenente un' immagine HTML e CSS 4
M [PHP] Cercare l'ultima immagine caricata in una cartella datata PHP 15
C [Photoshop] bordi tondi come posso fare per ottenerli come nell'immagine allegata Photoshop 2
M [HTML] Tasto condivisione social e immagine HTML e CSS 2
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
A Php variabile immagine inesistente PHP 4
R [PHP] Testo su immagine al passaggio del mouse PHP 2
L [PHP] controllo dimensione immagine per il resize PHP 2
felino [Wordpress] Immagine di sfondo (sotto il template) WordPress 8
Shyson [HTML] Sovrapporre un'immagine su un'altra HTML e CSS 2
A [PHP] Segnalazione in up-load immagine PHP 2
C [PHP] Scrivere testo su immagine PHP 3
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A [WordPress] Link multiplo su immagine WordPress 9
I [Photoshop] Come realizzare immagine tonalità di grigio Photoshop 0

Discussioni simili

Alto Basso