Uno dei modi per rendere un sito interessante è quello di interagire con l'utente. Per farlo occorre cogliere i suoi movimenti per capire dove cade la sua attenzione nella pagina. Il mezzo che ci permette di sapere cosa fà l'utente di fronte alla nostra pagina web è il cursore del mouse. Ad esso sono associati degli eventi, tra cui onmouseover e onmouseout, che ci dicono se il cursore del mouse è su di un oggetto oppure no.
Passiamo a vedere un po' di "effetti". Prova a passare il mouse sopra la frase scritta qui sotto:
Se il tuo cursore si trova qui sopra, vedrai lo sfondo della frase in giallo:
Questo è un effetto di sicuro impatto e di semplice realizzazione per mettere in evidenza porzioni di testo. Si realizza con il seguente codice:
<span onmouseover="this.style.backgroundColor='yellow';" onmouseout="this.style.backgroundColor='white';">
Se il tuo cursore si trova qui sopra vedrai lo sfondo della frase in giallo.
</span>
Grazie al tag <span> si identifica una porzione di testo. Se la porzione di testo è racchiusa tra i tag <p> o <div>, non occorre inserire <span>, come nel seguente esempio di codice:
<p onmouseover="this.style.backgroundColor='yellow';" onmouseout="this.style.backgroundColor='white';">
Se il tuo cursore si trova qui sopra vedrai lo sfondo della frase in giallo.
</p>
Come dicevamo, l'utente è controllato grazie agli eventi onmouseover e onmouseout. Infine grazie ai fogli di stile (CSS) è possibile formattare il testo a piacere. Nell'esempio precedente è stata utilizzata la proprietà backgroundColor, ma è possibile usare qualsiasi altra proprietà fornita dal CSS, ad esempio:
<span onmouseover="this.style.color='red';" onmouseout="this.style.color='green';">
Con un evento è anche possibile assegnare una classe:
<style type = "text/css">
.codice {
font-family: Courier New; font-size: 100%
color: #000000;
background: #FFFFCC;
}
</style>
<span onmouseover="this.className='codice';" onmouseout="this.className='';">
Sempre sfruttando i fogli di stile è possibile intervenire sulla posizione di una frase o di una parola all'interno di una pagina web
clicca qui
La realizzazione di questo effetto è molto semplice:
<p onclick="this.style.marginLeft = '10px'">clicca qui</p>
Nell'esempio si è utilizzata la proprietà marginLeft, ma il movimento può avvenire anche in verticale utilizzando marginTop. È possibile inserire questo effetto anche in una funzione, in modo da ottenere movimenti come il seguente:
>> clicca qui
Per realizzare questo effetto occorre, come prima, identificare il testo con un ID:
<p id="parola2" onclick="muoviti()">clicca qui</p>
Poi sull'evento «onclick» si fa partire una funzione:
<script type="text/javascript">
var x = 0;
var direzione = "sx";
function muoviti(){
oggettoDaMuovere = document.getElementById("parola2")
if (direzione=="sx"){ x++; } else { x--; }
oggettoDaMuovere.style.marginLeft = x+"px";
if (x > 100) { direzione="dx"; }
if (x < 0) { direzione = "sx"; }
z = setTimeout("muoviti()", 10);
}
</script>
Al caricamento della pagina, le variabili x e direzione sono inizializzate. All'avvio della funzione, la variabile x viene incrementata e viene usata per definire la distanza tra la frase e il lato destro dello schermo. La variabile direzione permette di tornare indietro quando x è maggiore di 100.
Avviata la funzione, richiama se stessa con il comando setTimeout ad intervalli di 10 millesimi di secondo. La funzione di stop invece interrompe il richiamo della funzione con un semplice javascript
<a href="javascript:window.clearTimeout(z)">Stop</a>
Applichiamo un ulteriore effetto alla nostra pagina. Chi sa fare pagine web è sicuramente capace a fare un link. Un utente un po' più avanzato riesce ad ottenere anche un effetto come questo (posiziona il mouse sul link senza cliccare):
Effetto ottenuto grazie all'attributo title del tag <a>:
<a href="http://html.it"; title="Il sito per i professionisti del web";>html.it</a>
Un effetto simile, ma più interessante, è invece il seguente:
| pro.html.it | Flash5.html.it | freeasp.html.it |
|
|
||
Passando con il mouse sui link, nell'area sottostante appare una descrizione del link. Questo effetto è utile nei menù dove chiaramente le voci che appaiono non possono essere troppo lunghe, ma si può dedicare un'area comune a tutte le voci per una descrizione maggiore.
Il sorgente per questo effetto è il seguente:
<table width="80%" border="1" cellspacing="0" cellpadding="0">
<tr align="center">
<td>
<a href="http://pro.html.it" target="_blank" onmouseover="document.getElementById('descrizione').innerHTML='Il sito per i professionisti del web'">pro.html.it</a>
</td>
<td><a href="http://flash5.html.it" target="_blank" onmouseover="document.getElementById('descrizione').innerHTML='Animazione per il web'">Flash5.html.it</a>
</td>
<td><a href="http://freeasp.html.it" target="_blank" onmouseover="document.getElementById('descrizione').innerHTML='Il sito delle Active Server Pages'">freeasp.html.it</a>
</td>
</tr>
<tr>
<td colspan="3">
<div id="descrizione"> </div>
</td>
</tr>
</table>
Per il funzionamento bisogna assegnare una zona per la descrizione, che nell'esempio è definita dal tag <div> nella cella inferiore. Passando sui link, usando quindi l'effetto onmouseover, si scrive la descrizione all'interno del tag <div> sfruttando il comando innerHTML.
Insieme all'evento onmouseovser, si poteva gestire anche l'evento onmouseout, per cancellare la descrizione quando l'utente sposta il mouse dal link. Basterà sostituire ai link definiti nel codice sopra esaminato con il seguente:
<a href="http://pro.html.it" onmouseout="descrizione.innerHTML=''" onmouseover="descrizione.innerHTML='Il sito per i professionisti del web'">pro.html.it</a>
