Popup informativa sui link

Grazie a overLIB,  http://www.bosrup.com/web/overlib/ una libreria javascript, è possibile creare una piccola finesta informativa sui link,  ottima da utlizzare nei form per la raccolta di dati, per renderele più friendly inserendo informazioni utili sulla compilazione della stessa .

La libreria javascript è completamente configurabile permettendo di personalizzare il colore dello sfondo, carattere, dimensione e altri parametri che troveremo nelle prime righe del file overlib.js. Per informazioni più dettagliate per sulla configurazione dello javascript consultare il manuale (solo in inglese) su http://www.bosrup.com/web/overlib/?Documentation 

Vediamo come inserire il codice nelle pagine web :

La prima riga da inserire richiama la libreria overLIB.js

<script language=JavaScript src="overlib.js"></script>

Poi utilizzando la libreria possiamo creare diverse tipologie di finestre informative

	posizionandoci sull'immagine visualizzeremo la finestra informativa
il link di rootweb.it	posizionandoci sul link visualizzeremo la finestra informativa e cliccando entreremo nella pagina del link
il link di rootweb.it	cliccando sul link visualizzeremo la finestra informativa
	cliccando sull'immagine visualizzeremo la finestra informativa

 Ecco il codice

	<a href="javascript:void(0);" onMouseOver="return mostra_caption(28);" onMouseOut="nd()"><img src=image/punto_domanda.gif width=21 height=21 border="0"></a>
il link di rootweb.it	<a href="http://www.rootweb.it" onMouseOver="return overlib('Clicca qui per entrare nel sito www.rootweb.it');" onMouseOut="return nd();">il           link di rootweb.it</a>
il link di rootweb.it	<a href="http://www.rootweb.it" onClick="return overlib('Clicca qui per entrare nel sito www.rootweb.it');" onMouseOut="return nd();">il           link di rootweb.it</a>
	<a href="javascript:void(0);" onClick="return mostra_caption(29);" onMouseOut="nd()"><img src=image/punto_domanda.gif width=21 height=21 border="0"></a>

 

  Con la funzione  mostra_caption(numero)   è possibile costruire in maniera ordinata una serie di dati informativi da richiamare nelle finestre informative

<script language=javascript> function mostra_caption(numero)   {  var captions = new Array();  captions[28] = ["prova finestra", "Questa è la finestra che si aprirà!"];  captions[29] = ["finestra 29", "nuova finestra, con un testo più lungo!"];  captions[29] = ["finestra 30", "informazione link"];  return overlib(captions[numero][1],CAPTION,captions[numero][0],LEFT);  } </script>

Scarica la libreria: overlib.js (formato zip 15 Kbyte)

Scarica un esempio: finestra_informativa.zip  (17Kbyte)

 

Commenta questo articolo Visualizza i commenti (-0,5)