Immagine diversa al rollover per ogni voce di menu

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; }

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

Utente Attivo
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.
 
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
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 6
L Come caricare un'immagine in Canvas dinamicamente Javascript 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
edittaruocco [Photoshop] Immagine in editor grafico Photoshop 0
A Salvare immagine ridimensionata in MySql con GD PHP 12
I Effetto glowing su immagine con GIMP Webdesign e Grafica 0
Selenio89 problema a caricare immagine con html. dove sbaglio? HTML e CSS 25
D [Photoshop] aggiungere piu tracce a immagine Photoshop 4
Merlina3377 [PHP] modificare file su form immagine thump PHP 1
R [Photoshop] Come creare questo effetto (v.immagine)?(sovrapposizione immagini in modo uniforme) Photoshop 2
U COLORAZIONE IMMAGINE IN BIANCO E NERO. Presentati al Forum 0
M [Javascript] Adattare immagine di background all'altezza dello smartphone Javascript 1
O [PHP] problema estrazione immagine da db PHP 12
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
K [HTML] Thumbnail (mouseover) + Popup immagine HTML e CSS 1

Discussioni simili