[santoroag]

Salve a tutti, sto cercando di realizzare un menu orizzontale grafico, ossia con al posto dei link in testo con delle immagini, il menù è composto da 6 voci, inizialmente pensavo di utilizzare 6 immagini .png per ogni voce di menu e altre 6 per il rollover, però mi è stato suggerito viste le troppe request http di utilizzare un'unica immagine per le voci a "riposo" e una per il rollover, ma non ho capito come funziona il tutto sinceramente, attualmente questa è la parte css:

.menu_container {
height:100px;
width:960px;
margin:0 auto;
background-image: url(immagini/menu.png);
background-position:center;
background-repeat:no-repeat;
}

.elementi_menu {
background-image:url(immagini/voci_menu.png);
background-repeat:no-repeat;
position:relative;
width:960px;
height:100px;
margin:0;
padding:0;
text-align:center;
}

.elementi_menu li {
position:absolute;
width:64px;
height:64px;
list-style:none;
}

.elementi_menu a {
text-decoration:none;
display:block;
width:100%;
height:100%;
}

.elementi_menu a span{
position:relative;
z-index:-1; /*nasconte testo menù dietro immagini*/
color:#FF0000;
}

.elementi_menu a:link
.elementi_menu a:visited {

}

.elementi_menu a:hover
.elementi_menu a:focus
.elementi_menu a:active {

}

.elementi_menu #home {
left:48px;
top:20px;
}
.elementi_menu #home a {
/*background-position:-48px -20px;*/
}
.elementi_menu #home a:hover,
.elementi_menu #home a:focus,
.elementi_menu #home a:active {

}


.elementi_menu #night {
left:210px;
top:20px;
}
.elementi_menu #day {
left:368px;
top:20px;
}
.elementi_menu #events {
left:527px;
top:20px;
}
.elementi_menu #gallery {
left:688px;
top:20px;
}
.elementi_menu #info {
left:848px;
top:20px;

e la parte html:

<div id="menu">
<div class="menu_container">
<ul class="elementi_menu">
<li id="home"><a href="#"><span>Home</span></a></li>
<li id="night"><a href="#"><span>Night</span></a></li>
<li id="day"><a href="#"><span>Day</span></a></li>
<li id="events"><a href="#"><span>Events</span></a></li>
<li id="gallery"><a href="#"><span>Gallery</span></a></li>
<li id="info"><a href="#"><span>Info</span></a></li>
</ul>
</div>
</div>

[Kagemitsu]

E' un po' tardino per mettermi a fare codice ora, ma ti spiego brevemente quello che ti hanno consigliato di fare.

Probabilmente avevi in mente di fare una immagine png con scritto sopra il nome del menu (che so, una immagine con sopra scritto Home e lo sfondo che vuoi) diversa per ogni voce del menu.

Quello che invece devi fare è usare una sola immagine in png che fa da sfondo, e il testo del menu lo metti via HTML e CSS. In questo modo usi una sola immagine di sfondo, sia per il menu a riposo che il rollover, mentre il testo che c'è dentro viene aggiunto via codice, basta che sul CSS imposti che ogni voce di quel menu usa lo stesso sfondo.

Spero di essere stato chiaro.

[Paolob]

Il suggerimento che ti è stato dato è giusto.
In questa tecnica ci sono diversi vantaggi, il primo è quello che ti hanno detto un'unica richiesta per l'intera immagine, che poi sarà memorizzata nella cache del browser.

Il concetto è che hai un'unica immagine con la grafica del tuo menu (magari ha bisogno di grafica particolare) e vai a mostrare nell'elemento di menu solo l'area dell'immagine che ti serve.
Sul roll over poi mostri la versione "premuta" del pulsante.

Devi giocare sulle dimensioni del pulsante e sulla posizione del background dell'immagine.
Naturalmente per una buona indicizzazione e accessibilità, lascia il testo del menu, ma utilizza text-indent: -999em; per nasconderlo alla vista degli utenti.

Su questo sito un amico ha utilizzato questa tecnica, nel menu a sinistra
http://www.asilonidobrucomela.it/

Mentre qui io l'ho usata parzialmente :P (progetto non recente) , nel menu in alto a destra.
http://www.mtbicio.it/
Qui ho usato singole immagini per ogni menu, ma la tecnica è quella...

[santoroag]

Paolo nel sito dell'asilo è utilizzata proprio la tecnica che vorrei implementare io, ho dato uno sguardo al foglio di stile con firebug, e mi sono accorto che si gioca sulla proprietà "background-position, in pratica viene creata una sola immagine di 500px, dove 250px ( parte sx ) dedicata al menu a "riposo", e i 250px destri per gli effetti.
Ho provato la stessa cosa, ho creato il menù in una singola immagine di 200px di altezza, i 100 superiori a riposo quelli inferiori con gli effetti, la prima parte del menù si vede correttamente, quando però alle proprietà a:hover, a:active, a:focus aggiungo la proprietà back...position non succede nulla... l ho applicato cosi:

.elementi_menu a:hover,
.elementi_menu a:focus,
.elementi_menu a:active {
background-position:0px -100px;
}

[Paolob]

Si, esattamente, si gioca sulla posizione.
Con un po di metodo, fai due colonne oppure disponi tutto su due righe... e hai le posizioni ad intervalli regolari.

Amazon lo usa in modo molto spinto
Guardati il sito e il logo in alto a sinistra...
Ecco l'immagine..
http://g-ecx.images-amazon.com/images/G ... 74301_.png

[Caluk]

Questa tecnica si chiama Sprites css se servono ancora info basta googlare e trovi una marea di tutorial

[santoroag]

Grazie per l info, cercando "menù grafici" non trovavo granchè...