mi spiego meglio: sto riscrivendo il codice del mio sitio internet http://www.davidemuci.it utilizzando i css e l'xhtml.

Il mio problema che il menù orrizzontale è stato fatto in JS. Mi piacerebbe ricreare lo stesso effetto con in CSS ma non se è possibile.

apparentemente dovresti fare una classe (o un id) x ogni voce del menù (visto che ognuna avrà un background diverso) poi cambi il background con :hover

Personalmente credo che, cercando di conservare il codice della tua pagina, puoi fare così:

ogni tasto nella tua pagina è fatta da due immagini sovrapposte. Una di sfondo e una che contiene il testo.
Quindi lasciando lo sfondo invariato, puoi interessarti al codice che riguarda l'immagine con testo.

Ad esempio il link alla home:

   <TD vAlign=center align=middle width=118 height=31>[url="javascript:;"]![image](Davide Muci fotografo e SEO specialist - fotografia di danza, sportiva, di scena, sociale - web marketing specialist_file/home.gif)</TD>

Puoi modificarlo sostituendo questo codice:

    <TD vAlign=center align=middle width=118 height=31>[url="http&#58;//www.davidemuci.it/"]HOME</TD>

Poi ti modifichi lo stile dal CSS a tuo piacimento.

In questo modo elimini solo un'immagine, quella con il testo, ma lo sfondo rimane.
Ne hai anche il vantaggio di avere dei link testuali.

Ho fatto qualche tentativo e si vede bene con Explorer. Prova la modifica e testala con vari browser e risoluzioni.

Non so se a te piace così. Ma l'effetto non cambia di molto, se non per il font.

Riporto qui un link che spiega bene un bel pò di cose in maniera chiara

[url=http://www.gdesign.it/pages/howto/articoli/rollcss/rollcss.php]Rollover css

Inoltre ho editato il title del post

Mi è venuta un'idea bizzarra: se facessi 5 include, ciascuno per ogni voce del menù non ci sarebbe più il problema della larghezza variabile. Portrei quindi posizionare il rollover con background-position!

Che ne dite?

non ho capito...

scusate ho detto una cazzata

problema risolto:

1- ho creato un bottone con photoshop con lo stesso sfondo del mio menu
2- ho scritto una voce del menù ad esempio - Home -
3- a questo punto ho fatto in modo che la scritta home diventasse trasparente. in pratica l'ho selezionata con la bacchetta magica e poi ho premuto canc.
4- a questo punto basta sistemare il foglio di stile:
<style type="text/css">
<!--

#home a{background: white;}
a:hover{background: yellow;}
-->
</style>

[/img]

ingengoso

controlla che funzioni con tutti i browser

L'importante è che tu abbia risolto

l'avevo provato anch'io ma ha un problema (spero per te che derivi dalla grandezza delle immagini) il rollover era in ritardo, invece del normale c'era un attimo in cui tutto era bianco e l'effetto faceva schifino...
se ti va bene fammelo sapere

@esteban said:

l'avevo provato anch'io ma ha un problema (spero per te che derivi dalla grandezza delle immagini) il rollover era in ritardo, invece del normale c'era un attimo in cui tutto era bianco e l'effetto faceva schifino...
se ti va bene fammelo sapere

questa è un cosa che mi succede spesso con IE (ovviamente solo con lui) e sinceramente non sono mai riuscito a risolverlo...

Vi riferite al flickering?

Ho letto un articolo il quale diceva che per eliminare questo fenomeno è sufficiente specificare lo stesso sfondo dei link anche sul list-item.