Tolgo CSS e le immagini diventan testo

[McLain]

Ciao,

ho un menù composto da gif, ogni voce è un'immagine.
Una volta che tolgo i fogli di stile, le immagini spariscono, addio menu.
So che è possibile, però, fare in modo con qualche riga di codice, che quando le immagini non vengono caricate, appare un testo sostitutvo, mi sapete suggerire come, o almeno dove posso cercare?

Grazie

[fcaldera]

ad ogni immagine inserisci l'attributo alt="descrizione immagine"

[McLain]

ok, ma posso inserire l'ALT anche dal file CSS?

le mie sarebbero immagini di background...

[pierofix]

Eh no, stai facendo confusione fcaldera. L'amico ha chiesto l'apparizione del testo una volta che il CSS è stato disabilitato, non le immagini.

Per giungere al risultato richiesto io mi trovo bene con la tecnica dell'image-replacement. Il concetto è semplice; mi creo il mio menù in modo testuale (ottimo soprattutto in termini di accessibilità):

<ul>[*]
      Blog
   [*]
      Informazioni
   [*]
      Fotografie
   [/list]

Ora dobbiamo fare in modo che il testo scompaia, lasciando spazio alle immagini, che inseriremo come sfondi. Assegnamo un id ad ogni elemento del menù:

<ul>[*]
      Blog
   [*]
      Informazioni
   [*]
      Fotografie
   [/list]

Creiamo il nostro foglio di stile:

/*
   1. Impostiamo i link a dimensioni pari a quelle delle
   immagini utilizzate (ipotizzo 150×40 px)

   2. Rendiamo invisibile il testo semplicemente
   indentandolo con valore negativo
*/
ul a {
   display:block;
   width:150px; height:40px;
   text-indent:-1000em;
}

/*
   Assegnamo l'immagine di sfondo a ogni link del menu'
*/
#blog { background:url(blog.gif) no-repeat 0 0; }
#info { background:url(info.gif) no-repeat 0 0; }
#foto { background:url(foto.gif) no-repeat 0 0; }

Rimane tuttavia un piccolo problema: in caso di disabilitazione delle immagini (non del CSS) i pulsanti perdono di significato, rimandendo dei rettangoli bianchi. Ecco perchè consiglio di mantenere il testo e realizzare solo degli sfondi carini in modo da simulare un pulsante. Ecco come ho fatto io (guarda i due pulsanti in alto):

- www.itgmarinoni.it

[pacovox]

http://wellstyled.com/css-replace-text-by-image.html
Cover-up span, Esempi 2 e 3, disattivando le immagini rimane comunque il testo sottostante.

[McLain]

Grazie pierofix,
sei stato utilissimo!

Ciao

PS. Per caso sabato scorso eri nei pressi di Arezzo?

[pierofix]

Originariamente inviato da McLain
PS. Per caso sabato scorso eri nei pressi di Arezzo?

Oh cribbio! Direi proprio di no: sono di Udine. Come mai la domanda? Continuiamo in privato.