Questo script crea nella zona in basso a destra un piccolo DIV per illustrare al visitatore il contenuto di un link presente nella pagina.
Potete vedere tutto a questa pagina di esempio: ESEMPIO.
Una volta che avete valutato lo script procediamo spiegando come inserirlo in una pagina HTML.
Il seguente codice è da inserire nei TAG <head></head> della pagina HTHML:
Ora il seguente codice va inserito dopo il TAG <body> nella pagina
Come potete vedere questo ultimo pezzo di codice serve per definire gli elementi che verranno mostrati.
Il primo link mostra un Div Box che compare al momento del passaggio del mouse sul link e svanisce nel momento dell'azione "onMouseout", cioè quando il vostro puntatore del mouse si sposta.
Non penso ci sia molto da capire. vi basta modificare i seguenti elementi da inserire nel TAG <a href="..></a>:
onMouseover="showfloatie('Il testo va inserito qui', event)"
onMouseout="hidefloatie()" |
Come vedete l'operazione non è molto difficile. Con questo codice il Div Box si autodimensiona, cioè la dimensione viene definita in automatico in base alla quantità di testo.
Si può però mettere anche una dimensione fissa, basta usare il seguente codice:
showfloatie('Il testo va inserito qui', event, '', 300, 200) |
Questo porterà a dimensionare il Div Box di 300 x 200 pixel.
Altra opzione è quella di modificare il colore dello sfondo, basta inserire il nome del colore (in inglese!!) come da esempio:
showfloatie('Il testo va inserito qui', event, 'lightblue') |
In fine si può anche rendere il Div Box fisso in modo da poter inserire la suo interno altre informazioni consultabili, poi tramite un tasto di chiusura lo si fa sparire.
Come da esempio.
Ecco l'esempio clicca sul link per visualizzarlo --> Esempio Div per Link
