collegamenti ipertestuali

[onieliv]

salve ragazzi
per risolvere un problema di grafica avevo pensato di adottare la seguente soluzione.
Volevo creare dei collegamenti ipertestuali da un'immagine di sfondo.
Immaginate che lo sfondo sia composto da 3 immagini:beh vorrei creare 3 collegamenti ipertestuali (uno diverso da ognuna)
con una normale immagine questo è possibile
ma con un'immagine di sfondo?
se si mi spiegate come si fa?
vi ringrazio!

[eX-Arus]

css:
#a1 { width: 100px; height: 50px; background: url(sfondo1.gif); }
#a2 { width: 100px; height: 50px; background: url(sfondo2.gif); }
#a3 { width: 100px; height: 50px; background: url(sfondo3.gif); }

html:

[pierofix]

Attenzione! Occorre sempre ricordare che un documento web, quando privato del suo foglio di stile, deve rimanere comprensibile, integro e fruibile.

Ecco che, per prima cosa, dobbiamo realizzare una struttura di markup che descriva a sufficienza il link; ad esempio:

<a id="regolamento" href="sito.it/regolamento-studenti/">
   Regolamento studenti
</a>

Una volta fatto ciò, possiamo passare al CSS. Basterà nascondere il testo, dare delle dimensioni fisse al pulsante ed applicarvi un'immagine di sfondo:

#regolamento
{

   /* Diamo una dimensione al pulsante */
   display:block;
   width:100px; height:30px;

   /* Nascondiamo il testo ed eliminiamo la sottolineatura */
   text-indent:-1000em; text-decoration:none;

   /* Applichiamo lo sfondo, posizionandolo al centro del rettangolo */
   background:url('regolamento.gif') no-repeat 50% 50%;

}

In questo modo, se disattiviamo il foglio di stile, o più in generale il documento è visitato da un utente di screen-reader (lettore di schermo per persone non vedenti), lo stile scompare, ma si capisce di cosa tratti il link perchè abbiamo il testo.