Script link con descrizione
a cura della WEBURL Soc. Coop. - Cuneo/Piemonte/Italia
servizio on line dal 2001
info@weburl.it

http://www.dominioweb.org

Registrazione domini internet compresi di spazio web illimitato + utility a 19,17 euro all'anno www.dominioweb.org

 

 

Inserire i link con Descrizione:

 

Descrizione:  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.

Passo 1 - Style :

Selezionare tutto il codice,  e copiatelo  fra i tags: <head> e </head>.:

<STYLE TYPE="text/css">

<!--

BODY {OVERFLOW:scroll;OVERFLOW-X:hidden}

.DEK {POSITION:absolute;VISIBILITY:hidden;Z-INDEX:200;}

//-->

</STYLE>


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

Stessa procedura: selezionare tutto il codice e trasferitelo nella vostra pagina web,   subito dopo il tag: <body>:
<DIV ID="dek" CLASS="dek"></DIV>

 


Passo 3 - SCRIPT : selezionare tutto il codice e trasferitelo nella vostra pagina web, in questo caso all'interno dei tags: <body> e </body>:

<script language="JavaScript" type="text/javascript">

// Prelevato su http://web-link.it

/*

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 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, questi parametri  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

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.

Selezionare tutto il codice e trasferitelo nella vostra pagina web, in questo caso dopo i tags: <body> e <body>:
<a href="#" onmouseover="popup('messaggio personalizzato sulla finestrella del link ','#fffff0')" onmouseout="kill()">Testo del link</a>