Gli effetti generati da eventi Javascript sulla status bar dei browser non sono certo una novità.
L'esempio di questa settimana pero' non si limita ad una seplice esposizione di testo nella status bar del browser, ma va oltre con un effetto gradevole e soprattutto originale. È bene premettere che per status bar si intende il luogo solitamente deputato a visualizzare le URL dei vari link. Se per esempio il puntatore del mouse sfiora un link ad HTML.it, nella status bar apparirà "http://www.html.it".
Lo script presentato in questo articolo visualizza una scritta fissa, che solitamente coincide con il nome del sito o della sezione, e quando il puntatore del mouse passa su un link, il commento assegnato con onMouseOver non sostituisce la scritta fissa ma va ad aggiungersi ad essa.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Esempio.htm è l'unico file di questo script, che vista la semplicità non potrebbe averne altri.
Il codice dello script è in parte contenuto tra i tag <head> del documento, e in parte del corpo dello stesso. All'interno di <head> va inserita la sintassi che imposta il testo fisso visualizzato nella status bar e le due funzioni "writeme" e "wdef":
<script type="text/javascript" language="javascript">
function writeme(say, p){
if ( p==1) self.status="W W W . H T M L . I T " + say;
else self.status="W W W . H T M L . I T [" + say + "]";
}
function wdef(text){
self.status="W W W . H T M L . I T"
}
</script>
Ovviamente al titolo "W W W . H T M L . I T" va sostituito il testo fisso che si intende dare alla status bar.
I testi assegnati ai link del documento saranno inseriti tra parantesi quadre [] cosi' come stabilito dalla riga di codice: [" + say + "]. In questo esempio "say" sarà sostituito volta per volta dai commenti dei singoli link.
Perchè lo script funzioni non ci si puo' limitare alla sola impostazione della sintassi tra i tag <head>, ma bisogna agire su tutti i link che si vogliono commentare.
Nell'esempio allegato a questa mail abbiamo impostato 5 link ad altrettante sezioni di HTML.it:
<a href="http://www.html.it" onmouseover="writeme('Pagina principalè) ; return true" onmouseout="wdef()">Pagina principale</a>
<a href="https://www.html.it/jscript" onmouseover="writeme('Javascript') ; return true" onmouseout="wdef()">Javascript</a>
<a href="https://www.html.it/applet" onmouseover="writeme('applet Javà) ; return true" onmouseout="wdef()">Applet Java</a>
<a href="https://www.html.it/font" onmouseover="writeme('True type font') ; return true" onmouseout="wdef()">True type font</a>
<a href="https://www.html.it/dynamic" onmouseover="writeme('Dynamic HTML') ; return true" onmouseout="wdef()">dynamic HTML</a>
Il commento visualizzato insieme al titolo "W W W . H T M L . I T" è compreso all'interno del gestore di eventi onMouseOver ed in particolare nella riga di codice:
onmouseover="writeme('Pagina principalè)
Quando il puntatore del mouse passa sul link si attiva con OnMouseOver la funzione "writeme", mentre quando ne esce viene richiamata la funzione "wdef" con OnMouseOut.
Perchè l'effetto si produca su tutti i riferimenti ipertestuali del documento è necessario inserire il relativo codice in ognuno di essi.
