Menu orizzontale con diagonali e rollover

[goandy84]

Buon giorno a tutti, spero che qualcuno sappia darmi una soluzione a un problema che mai sono riuscito a risolvere senza l'utlizzo di un flash.

Vorrei creare un menu orizzontale con immagini jpg che si sovrappongono e che hanno lati diagonali.

L'esempio di ciò che vorrei fare è presente nell'allegato di questa discussione oppure a questo link
http://www.iart-web.com/prove/orizzontale.jpg

Proponendo un rollover sul bottone che è bianco e che rimanga selezionato se la pagina visitata risulta quella del bottone.

Ora, il problema che ho riscontrato è proprio quello che dividendo poi i vari bottoni in photoshop e inserendoli tramite css nei vari <a> gli angoli si sovrapporrebbero o si taglierebbero e non verrebbe un rollover corretto ma verrebbero gli angoli del colore del bottone precedente e successivo.

Qualcuno sa come posso risolvere il problema?

[goandy84]

Mi sa che ho chiesto troppo

[kontrasto]

Forse non è del tutto impossibile. Potresti creare un normale menu con le immagini, utilizzando la tecnica dei CSS sprites per il rollover, e poi potresti far sovrapporre queste immagini con il posizionamento assoluto.

Ci vuole un po' di lavoro, ma si può fare. Se può aiutarti, sul mio blog ho scritto un tutorial sia su come creare un menu con le immagini e con i CSS sprite sia su posizionamento assoluto e relativo.

Chiaro che siccome le immagini si devono sovrapporre dovrai usare delle png per preservare la trasparenza.

Fammi sapere se ci riesci!

[goandy84]

eh come ben sappiamo il nostro caro amico internet explore 6 non ammette trasparenza e finirei col vedere aloni bianchi intorno all'immagine. Mi sa che è quasi una richiesta impossibile la mia. uff

[kontrasto]

Non disperare e non farti bloccare da IE6!!!

Esistono delle soluzioni per usare le png in IE6. Vedi per esempio questo post sul blog Tomstardust.

Provaci!