Immagine diversa al rollover per ogni voce di menu

terrasamba

Immagine diversa al rollover per ogni voce di menu

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> [/html]
Vorrei sapere come posso, all'evento rollover, mettere un'immagine diversa per ogni voce di menu e come posso far sparire il nome del link sempre durante il rollover volevo postare già un codice css ma mi dà sempre errore e non me lo fa postare (cosi magari potevate farmi la correzione direttamente da lì). Se lo invio a qualcuno in pvt me lo può postare? grazie

marinski

Devi lavorare con le immagini e non con i link.
Crei un immagine per ogni link del menu, nel tuo caso crei dei bottoni con scritto Home Page, About, Music; Photo e Contact.
Dopo ad ogni voce del menu dai una classe.
Questo è il codice di esempio per il link Home Page:

a#home{
	background: url(images/HOME.png); **/*MODIFICA IL PERCORSO DELLA SINGOLA IMMAGINE*/**
	width: 70px; **/*LARGHEZZA DELLA TUA IMMAGINE*/**
	height: 30px; **/*ALTEZZA DELLA TUA IMMAGINE*/**
	}

	a#home:hover{
	background: url(images/hover/HOME.png); **/*MODIFICA IL PERCORSO DELL IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE*/**
	}

	a.homecurrent{
	background: url(images/hover/HOME.png); **/*METTI LO STESSO PERCORSO DI PRIMA, COSI QUANDO LA HOME SARA LA VOCE VISUALIZZATA IL PULSANTE RIMARRA ACCESO COME QUANDO CI PASSI SOPRA COL MOUSE*/**
	width: 70px;
	height: 30px;
	}

Dunque il tuo codice HTML diventerà così:

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

karedas

Ciao terrasamba,
innanzitutto si possono scegliere molti metodi di "rollover", alcuni pesanti via javascript, altri molto leggeri con i css. Scegliere un metodo "javascript" vuole spesso dire appoggiarsi a librerie esistenti (jquery, prototype, mootools..) ed elaborare effetti interessanti.

La mia personale scelta è l'utilizzo del css più un'accortezza da tenere di conto durante la creazione delle immagini.

Tramite un programma di grafica crei un nuovo file. La larghezza sarà l'effettiva del tuo oggetto (il pulsante), mentre l'altezza sarà il "doppio" di quella della singola immagine.
Perchè?
Questo perchè nella prima metà superiore posizioneremo la nostra immagine in "ROLLOUT", mentre nella metà inferiore posizioneremo l'immagine con effetto "ROLLOVER".
L'operazione dovrà ovviamente essere ripetuta per ogni immagine.
Dai un "ID" ad ogni tag "<li>", riferendosi magari al testo contenuto, in modo da attribuirci ad ogni link, ad esempio "#home, #about, #music, #photo,#contact".

3)Regole css:


ul{
overflow:hidden;
}
ul li{
list:none;
float:left;
}
ul li a{
text-indent:-9999px;
display:block;
height:50px;
}

ul li a#home{
width:120px;
background:url('../cartella/home.jpg') no-repeat left top;
}

ul li a#home:hover{
background-position:url('cartella/home.jpg') no-repeat left -50px;
}

```Aggiungi con la stessa sintassi gli altri id(voci di menù).
Sono un pò di corsa quindi non ho controllato se è corretto ciò che ti ho scritto, fammi sapere intanto se hai compreso fino ad adesso.

Ciao!


P.S.  Ah per l'appunto io e mariaski abbiamo rispoto nel solito medesimo attimo, meglio per te :)