Link con finestra descrittiva

Links con finestra descrittiva

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

Descrizione: Lo script aggiunge una finestrella descrittiva e personalizzabile ai link che necessitano di commenti o spiegazioni da parte del webmaster. Per ottenere questo effetto oltre allo script si fa ricorso a degli eventi: onmouseover e onmouseout.

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

<STYLE TYPE="text/css">  </STYLE>

Passo 2 - HTML : Immediatamente dopo l'elemento <body> inserite questa riga di codice html:

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

<script language="JavaScript" type="text/javascript"> Pop up information box II (Mike McGrath (mike_mcgrath@lineone.net, http://website.lineone.net/~mike_mcgrath)) Permission granted to Dynamicdrive.com to include script in archive For this and 100's more DHTML scripts, visit http://dynamicdrive.com */ Xoffset=-60; // modifica questi valori per ... Yoffset= -70; // cambiare la posizione della finestrella. var nav,old,iex=(document.all),yyy=-1000; if(navigator.appName=="Netscape"){(document.layers)?nav=true:old=true;} if(!old){ var skn=(nav)?document.dek:dek.style; if(nav)document.captureEvents(Event.MOUSEMOVE); document.onmousemove=get_mouse; } function popup(msg,bak){ var content="<TABLE WIDTH=180 BORDER=1 BORDERCOLOR=#98ccff CELLPADDING=2 CELLSPACING=1 "+ "BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=Green SIZE=3>"+msg+"</FONT></TD></TABLE>"; if(old){alert(msg);return;} else{yyy=Yoffset; if(nav){skn.document.write(content);skn.document.close();skn.visibility="visible"} if(iex){document.all("dek").innerHTML=content;skn.visibility="visible"} } } function get_mouse(e){ var x=(nav)?e.pageX:event.x+document.body.scrollLeft;skn.left=x+Xoffset; var y=(nav)?e.pageY:event.y+document.body.scrollTop;skn.top=y+yyy; } function kill(){ if(!old){yyy=-1000;skn.visibility="hidden";} } // End --> </SCRIPT>

All'interno del codice 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

Passo 4 - HTML: Non resta che introdurre gli eventi onmouseover e onmouseout a tutti i link che necessitano della finestra descrittiva:

<a href="#" onmouseover="popup('messaggio personalizzato sulla finestrella del link ','#fffff0')" onmouseout="kill()">Testo del link</a>