Stupite i vostri visitatori del sito con l'aggiunta di effetti di rollover alle pagine Web. Cascading Style Sheets consentono di modificare l'aspetto di un collegamento ipertestuale senza l'utilizzo di codice JavaScript. Molti navigatori di Internet hanno familiarità con l'effetto "sottolineatura". L'effetto sottolineatura si verifica quando il browser evidenzia un collegamento ipertestuale, come si sposta il mouse su di esso. Utilizzando i CSS, è possibile aggiungere effetti di rollover supplementari alle pagine Web XHTML.

istruzione

1 Aprire il documento XMTL utilizzando il blocco note o un editor HTML.

2 Aggiungere questo codice alla sezione "corpo" del documento:

<a href= "http://www.abc.com&quot; class="underline"> sottolineato Rollover Effetto </a>
<a href="http://www.xyz.com&quot; class="highlight"> evidenziato Rollover Effetto </a>

Questo crea due collegamenti ipertestuali. Ogni collegamento ipertestuale fa riferimento a una classe CSS diverso.

3 Aggiungere questo codice alla sezione "testa" del documento:

STYLE type = "text / css">
a.underline: link {text-decoration: none}
a.underline: active {background-color: trasparente; text-decoration: none}
a.underline: visited {background-color: trasparente; text-decoration: none}
a.underline: hover {background-color: trasparente; text-decoration: underline}

Questo codice CSS definisce le proprietà di visualizzazione per tutti i collegamenti ipertestuali che fanno riferimento alla classe "sottolineatura". L'ultima linea definisce la classe "hover". Proprietà impostate per questa classe determinare come un collegamento ipertestuale appare quando un cursore del mouse passa sopra il collegamento ipertestuale. In questo esempio, la proprietà "text-decoration" è "sottolineatura".

4 Aggiungere il seguente codice CSS sotto il codice mostrato nel passaggio precedente:

a.highlight: link {background-color: trasparente; text-decoration: none}
a.highlight: active {background-color: trasparente; text-decoration: none}
a.highlight: visited {background-color: trasparente; text-decoration: none}
a.highlight: hover {background-color: Giallo; text-decoration: none}
</ Style>

Il nome di questa classe è "highlight". Si noti che il valore "background-color" tag "hover" è "giallo". Questo farà sì che il colore di sfondo di un collegamento ipertestuale per cambiare al giallo quando un cursore del mouse si sposta sul collegamento ipertestuale.

5 Salvare il documento XHTML e aprirlo nel browser. Spostare il cursore del mouse sopra il primo collegamento ipertestuale. Il browser sottolineare il collegamento ipertestuale.

6 Spostare il cursore sopra il secondo collegamento ipertestuale. Il browser metterà in evidenza il collegamento ipertestuale.

Consigli e avvertenze

• Con la definizione di proprietà nel CSS di classe "hover", è possibile creare una varietà di effetti di rollover. Si potrebbe anche cambiare il colore del carattere e lo stile applicando ulteriori proprietà CSS dei font. (Vedi Risorse)