Alcuni degli effetti speciali più popolari del Web non richiedono alcuna codifica JavaScript. Se si utilizza il servizio gratuito di Google Sites per creare e mantenere le pagine Web, è possibile dimostrare questo con l'aggiunta di un effetto hover colorato a uno dei collegamenti di testo della tua pagina. Questo è possibile perché i browser fanno effetto hover avvengono automaticamente se si aggiunge una speciale definizione Cascading Style Sheet per HTML della pagina.

istruzione

1 Visita il tuo account Google Sites, e fare clic su uno dei siti che hai creato per visualizzare la pagina. Fare clic sull'icona "Modifica pagina", fai clic su "Inserisci" e poi cliccare su "Casella HTML". Si apre la finestra Inserisci Box HTML e visualizza una grande casella di testo.

2 Incollare il seguente testo in quella grande scatola di testo:

<Style>
a.greenForeground: hover {color: green; }

a.yellowBackground: hover {background-color: yellow; }
</ Style>

<A class = "greenForeground"
href = "URL1"> Clicca per visitare il sito 1 </a>

<A class = "yellowbackground"
href = "URL2"> Clicca per visitare il sito 2 </a>

Sostituire URL1 con l'URL vuoi la gente a visitare quando fanno clic "Clicca per visitare il sito 1." Sostituire URL2 con un altro URL. La prima riga dopo il tag di apertura <style> definire una classe denominata greenForeground. Questa classe imposta il colore di elementi che fanno riferimento al verde. La seconda riga crea una classe simile di nome yellowbackground. Questo cambia colore di sfondo di un elemento al giallo. La "a" selettore dice browser per applicare le modifiche solo ai link che fanno riferimento a tali classi.

3 Fai clic su "Salva" per salvare le modifiche e fare clic sul pulsante "Salva" nella parte superiore della pagina di Google Site. Premere il tasto "F5" per assicurare che il browser si aggiorna. La pagina mostra i due link aggiunti alla casella HTML. Passare il cursore del mouse sopra i due link per vedere come i loro colori cambiano.

Consigli e avvertenze

• Sostituire verde e giallo con tutti i colori HTML valido che ti piace per creare diversi effetti di colore. Siti quali W3Schools.com contengono i nomi di tutti i colori che è possibile utilizzare (link in Risorse). È inoltre possibile assegnare un nome al classi qualcosa che ti piace. Quei nomi sono greenForeground e yellowbackground in questo esempio. Se si modifica un nome di classe a qualcos'altro in un unico luogo, in modo che si cambia quel nome ovunque esso viene visualizzato nella casella HTML.
• Se hai bisogno di modificare un Box HTML esistente, fare clic sulla casella per selezionarlo e quindi fare clic sull'icona "Proprietà", che ha la forma di un ingranaggio. È quindi possibile vedere il codice aggiunto e modificarlo in base alle esigenze.