image replacement e menu

[felixsuperstar]

Secondo voi un meno creato tramite l'image replacement con il tag <span> annidato che permette dunque di essere visualizzato da chi naviga con browser tetuali o non carica semplicemente le immagini, é corretto? pro e contro?

Grazie.

[seed_squall_it]

Certo che è corretto. L'image replacement serve appunto a mantenere accessibile e fruibile il codice anche se i CSS o le sole immagini di sfondo non vengono caricati. Premesso che, trattandosi di un menu, la struttura più corretta resta quella di una lista, puoi tranquillamente annidare i tag <span> dentro i tag <a> di ogni voce, formattare i link e gli <span> come elementi block-level (magari con float: left se il tuo menu è orizzontale) e quindi assegnare loro delle dimensioni e uno sfondo. A seconda di come si presenta il tuo menu, puoi optare per tecniche di image replacement diverse.
Personalmente utilizzo spesso la Phark Image Replacement e la Pixy Cover-Up Span, a seconda che i link siano flottanti (o posizionati in modo assoluto) o meno. La Phark, come saprai, funziona solo in quei due casi. Credo che l'unico "contro" di questo tipo di menu sia semplicemente il "peso leggermente superiore" dovuto al caricamento delle immagini di sfondo...nient'altro. Un'altra controindicazione (chiamiamola così, anche se non lo è davvero), è data dall'interpretazione di Firefox dell'area cliccabile con la Phark. Questa tecnica si basa sullo "spostamento" del testo dei link all'esterno della pagina tramite la proprietà text-indent con valore negativo molto elevato. Firefox, quando clicchi su uno di questi link, ti mostra il "contorno" dell'area cliccabile (quello tratteggiato) che si estende fino all'esterno del monitor, dove si trova il testo. Mi dispiace ammetterlo, ma questa è una delle cose in cui è Firefox a "sbagliare", non IE.

[pierofix]

Originariamente inviato da felixsuperstar
Secondo voi un meno creato tramite l'image replacement con il tag <span> annidato che permette dunque di essere visualizzato da chi naviga con browser tetuali o non carica semplicemente le immagini, é corretto? pro e contro?

Grazie.

Esistono due principali tipi di image-replacement:

1. il primo vuole innanzitutto preservare la semplicità e l'essenzialità del markup, ovvero il seguente:
   

   XHTML
   <a href="#">
      Pagina principale
   </a>
   
   CSS
   a
   {
      display:block;
      width:200px; height:30px; /* Dimensioni immagine */
      text-indent:-1000em;
      background:url('pulsante.gif') no-repeat 0 0;
   }

2. il secondo si interessa di un aspetto in più, ovvero: se l'utente disattivasse solo le immagini (non tutto il foglio di stile), i pulsanti rimarrebbero dei rettangoli vuoti; la soluzione seguente elimina questo inconveniente, richiedendo però una leggera sporcatura (visti gli scopi, sorvolabile) del markup:
   

   XHTML
   <a href="#" title="Pagina principale">
      <span></span>
      Pagina principale
   </a>
   
   CSS
   a
   {
      position:relative;
      display:block;
      width:200px; height:30px;
   }
      a span
      {
         display:block;
         position:absolute; top:0; left:0;
         z-index:1;
         width:200px; height:30px;
         background:url('pulsante.gif') no-repeat 0 0;
      }