Salta la barra di navigazione

• Home
• CSS e XHTML
• Web Surfing
• Link
• e-m@il

---

Tutorial CSS

Due rollover nello stesso link

Può essere interessante impostare due o più effetti da applicare a più sezioni dello stesso link.

Le applicazioni potrebbero essere molteplici, ma in questo tutorial vedremo come fare il classico bannerino 80x15 utilizzando i CSS.

Il codice (X)HTML è molto semplice.

<a href="#" title="Span Web Lab - Articoli e tutorial su CSS e XHTML">
    <span>&nbsp;CSS&nbsp;</span> SWL
</a>

In pratica è un normalissimo link in cui una parte di testo è racchiusa in uno "<span></span>" con qualche "&nbsp;" che serve per dare uno spazio. Come qualcuno forse starà immaginando, la tecnica è molto simile a quella utilizzata per ottenere una specie di slide d'immagini coi CSS.

Vediamo subito tutto il CSS per ottenere il bottone.

a{
    display: block;
    border: 1px solid #000;
    width: 78px;
    font: 10px/13px verdana, arial, serif;
    background: #FC6;
    text-decoration: none;
    color: #333;
}
a span{
    background: #fff;
    color: #00F;
    cursor: pointer;
}
a:hover{
    background: #fd6;
    color: #666;
}
a:hover span{
    color: #66f;
}

Vediamolo nel dettaglio le parti più interessanti.

a{
    display: block;
    border: 1px solid #000;
    width: 78px;
    font: 10px/13px verdana, arial, serif;
    ...
}

Display: block trasforma il link da elemento "inline" ad elemento "block". Questa trasformazione è necessaria per poter definire un "width" che sia letto da un browser standard.

Border: 1px solid #000 da al link un bordo nero di un px.

Width: 78px perché al width si aggiunge 1px del bordo di sinistra ed 1 del bordo di destra che fa quindi 80px. Leggere l'errata interpretazione del box model per chiarimenti.

Font: 10px/13px verdana... indica un "font-size" di 10px e un'interlinea di 13px. L'interlinea darà l'altezza del bottone che stiamo creando e centrerà verticalmente il testo.

a span{
    ...
    cursor: pointer;
}

Con "a span" definiamo lo span contenuto nel link. L'unica cosa da notare è cursor: pointer, senza, con Internet Explorer, non apparirebbe la classica "manina" che indica il massaggio del mouse su un link.

a:hover{
    ...
}
a:hover span{
    ...
}

Con a:hover e a:hover span definiamo il comportamento al passaggio del mouse. Fine. Ecco il nostro bottone 80x15.

Naturalmente questo è solo un esempio, poco convincenti soprattutto le dimensioni fisse: dato che molti browser permettono di ridimensionare il testo anche se vengono utilizzate dimensioni fisse per i caratteri. Sarebbe meglio dare la misura del bottone in em per permettergli di ridimensionarsi all'ingrandimento del carattere, ma come esempio va più che bene, mi pare.

Vi ricordo che non esiste solo il mouse per selezionare i link, e che è buona norma differenziare i link per chi utilizza la tastiera.