Box con riassunto della pagina linkata


Questo script integra javascript e css per visualizzare delle informazioni sulla pagina a cui porta un link, in un box creato con una tabella.
Vediamo subito come funziona e poi diamo un'occhiata al sorgente (passate il mouse sopra i link per vedere cosa succede):


The Shiny Side of the moon

Il sito del gianna

The Shiny Side links


Ecco qua sotto il codice commentato passo passo per creare quello che avete appena visto...

<table border="0" width="100%">
<td border="0" width="50%"><b><br>
<a href="index.html" onmouseover="informa('L\'home page di \'The Shiny Side of the moon\'');" onmouseout="cancella();">The Shiny Side of the moon</a><br><br>

<a href="http://web.tiscalinet.it/sitodelgianna" target="_blank" onmouseover="informa('Ci toverai cose utili per la tua pagina web\, una sezione sul c\+\+, una sulla calcolatrice Ti\-89 e tanto altro ancora');" onmouseout="cancella()">
Il sito del gianna</a><br><br>

<a href="links.html" onmouseover="informa('I link proposti da questo sito');" onmouseout="cancella()">The Shiny Side links</a><br><br>

</td>
<td style="border:5px ridge yellow" width="50%">
<font face="courier new"><h4>
<span id="box_infos" style="visibility:hidden">
Qui vano le informazioni
</span>
</td>
</table>

<script language="javascript">

function informa(testo)
{
document.all.box_infos.innerText= testo;
document.all.box_infos.style.visibility="visible";
}
function cancella()
{
document.all.box_infos.style.visibility="hidden";
}

</script> 		Per prima cosa creiamo la tabella che ospiterà link e il commento. La creiamo senza bordo (border="0") e a tutto schermo (width="100%", dimensionamento relativo).
Si creano poi le due celle di dati.
La prima contiene i link che hanno gli attributi onmouseover e onmouseout settati in questo modo: il primo richiama la funzione informa(stringa) e il suo argomento è la stringa di testo che deve essere mostrata nel box affianco, e il secondo richiama la funzione cancella() che non cancella alla lettera, ma si limita a nascondere il testo nella casella.

La seconda cella di dati contiene del testo (Qui vanno le informazioni) che in effeti non viene mai visualizzato in quanto style imposta l'argomento visibility come hidden e quindi non mostrato, ma mi serviva per farvi capire cosa si andrà a modificare per visualizzare le scritte.
Il testo, come avrete visto, è rinchiuso in un oggetto da span con id box_infos.
Infine, il bordo di questa cella è un ridge da 5 pixel color giallo.

Finita la tabella si passa allo script vero e proprio.
In questo script vengono definite le funzioni che vengono richiamate dai link al passaggio o meno del mouse sopra di loro.
informa(testo) prende il testo dell'argomento della funzione richiamata dal link e lo sostituisce al testo di box_infos, tramite la chiamata a innerText che per appunto definisce il testo semplice da mettere all'interno di span. Notate che esiste anche il metodo innerHTML che fa la stessa cosa, solo che permette di inserire anche codice HTML!
Dopo la sostituzione di testo, rende quest'ultimo visibile attraverso l'uso di style.visibility="visible".

La funzione cancella() si limita a rendere invisibile il testo di cui sopra ed essendo chiamata da onmouseout fa sì che il box rimanga vuoto a meno che non si passi il mouse su uno dei link.