Link con finestra descrittiva

Link con finestrella descrittiva

Crediti:
Name: Mike Mcgrath
Website: http://website.lineone.net

Descrizione: Aggiunge una finestrella personalizzabile a quei links che necessitano di ulteriori spiegazioni. Per ottenere questo effetto oltre allo script, si fa uso di una definizione di style e degli eventi: onmouseover e onmouseout associati al link stesso, per cui risulta leggermente laborioso specie per chi non ha dimestichezza con html.
Laborioso non significa impossibile, basta seguire attentamente tutti i vari passaggi sotto descritti.

Questo un esempio: Testo del link

Passo 1 - Style: Copiate il codice sottostante e incollatelo nella vostra pagina web, in questo caso fra i tags: <head> e </head>.

Passo 2 - HTML: Immediatamente dopo la definizione (tag) dell'elemento <body> inserite questa riga di codice html:

Stessa procedura: copiate il codice e trasferitelo nella vostra pagina web, in questo caso subito dopo il tag: <body>

Passo 3 - SCRIPT: Adesso all'interno degli elementi (tags) <body> </body> deve essere posizionato lo script:

Stessa procedura: dopo aver copiate il codice sottostante incollatelo nella vostra pagina web, in questo caso all'interno dei tags: <body> e </body>

All'interno dello script ci sono i parametri per poter variare le dimensioni della finestra, la sua posizione e i colori, oltre alle dimensioni e ai colori del font di scrittura.
Chi ha dimestichezza con html riconoscerà questi parametri che sono:

TABLE WIDTH=180 : larghezza finestra
BORDER=1 : spessore bordo
BORDERCOLOR=#98ccff : colore bordo
FONT COLOR=Green SIZE=3 : colore e dimensione del font di scrittura

Oltre a questi paramente esiste anche la possibilià di cambiare il colore dello sfondo, agendo sul prossimo blocco di codice, quello relativo al link stesso.

Passo 4 - HTML: Non resta che introdurre gli eventi onmouseover e onmouseout a tutti i link che necessitano di una finestrella pop up. I Links vanno inseriti all'interno della propria pagina web nella zona <body> allo stesso identico modo di qualsiasi altro link.

Stessa procedura: copiate il codice sottostante e tresferitelo nella vostra pagina web, in questo caso dopo i tags: <body> e <body>

E' abbastanza intuitivo dove inserire il testo che dovrà comparire a video, praticamente al posto della scritta: messaggio personalizzato sulla finestrella del link. Mentre il numero esadecimale che segue, è relativo al colore dello sfondo e può essere sostituito con qualsiasi altro colore valido in html.

Note: Questi sotto alcuni esempio associati a link diversi:

Esempio link 1 Esempio link 2 Esempio link 3

E' vietata la riproduzione anche solo parziale di immagini, icone, layout e contenuti senza previa autorizzazione.
I marchi, i loghi e i prodotti citati sono dei legittimi proprietari.