Rollover per il testo con JavaScript

Effetti estetici nelle pagine web sono possibili anche per il testo, usando JavaScript

javascript_logo
Sebbene sia molto usata la possibilità di cambiare le immagini di una pagina web passandoci sopra con il mouse (come visto anche in questa pagina), usando sempre JavaScript è possibile variare le caratteristiche del testo in modo analogo.In questo caso il codice da usare è ancora più semplice ed è basato sulla gestione degli eventi onMouseOver e onMouseOut.

onMouseOver si attiva quando il mouse entra sull’oggetto
onMouseOut si attiva quando il mouse esce dall’oggetto

Il risultato è del tipo di questi esempi riportati qui di seguito:

Questo paragrafo diventa grassetto quando il mouse ci passa sopra.

Questo paragrafo cambia il colore dello sfondo quando il mouse ci passa sopra.

Il resto è determinato dalla scelta della caratteristica da modificare, in un caso l’attributo FontWeight, nell’altro BackgroundColor

Ed ecco il codice usato per gli esempi:

<p onmouseover=”this.style.fontWeight=’bold’ “onmouseout=”this.style.fontWeight=’normal'”>Questo paragrafo diventa grassetto quando il mouse ci passa sopra.</p>

<p onmouseover=”this.style.backgroundColor=’red’ “onmouseout=”this.style.backgroundColor=’white'”>Questo paragrafo cambia il colore dello sfondo quando il mouse ci passa sopra.</p>

Ciò detto, mi sembra opportuno sottolineare che la gestione complessiva del modo in cui il testo viene visualizzato, e più in generale il modo in cui si controlla la pagina, è opportuno che venga gestito integralmente tramite i fogli di stile (CSS).

Lascia il tuo commento