Dhtml - Finestra al click del mouse

Finestra al click del mouse

Questa demo visualizza, cliccando su un link testuale o d'immagine, una finestra di dimensioni e colore desiderato vicino al link. L'effetto che si ottiene con MSIE e' ancora pi suggestivo, visto che genera un effetto "fade" della finestra sia quando appare che quando scompare.

il codice da inserire nella tua pagina

<style>  </style> <BODY bgcolor="white" > <ilayer id="dropmenu01" height=35px> <layer id="dropmenu02" visibility=show> <span id="iewrap"> <span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false"> <font face="Verdana"><b><a href="alternate.htm">Clicca qui</a></b></font> </span> </span> </layer> </ilayer> <script language="JavaScript1.2"> //set below variable to false if you wish to turn off "fade-off" effect for IE 4 users var enableeffect=true //change the contents of the array to your own. You may extend this list as neccessary var selection=new Array() selection[0]='<font face="Verdana"><a href="http://digilander.libero.it/Centox100/Sito/">100%</a><br>' selection[1]='<a href="http://digilander.libero.it/Centox100/Sito/scripts.htm">Jscript</a><br>' selection[2]='<a href="http://digilander.libero.it/Centox100/Sito/dhtml.htm">Dhtml</a><br>' selection[3]='<a href="http://digilander.libero.it/Centox100/Sito/download.htm">Programmi</a><br>' selection[4]='<a href="http://www.freeforumzone.com/viewforum.aspx?f=9112">Forum</a><br></font>' if (document.layers) document.dropmenu01.document.dropmenu02.visibility='show' function dropit2(){ if (document.all){ dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (dropmenu03.style.visibility=="hidden"){ if (enableeffect) dropmenu03.filters.revealTrans.apply() dropmenu03.style.visibility="visible" if (enableeffect) dropmenu03.filters.revealTrans.play() } else{ hidemenu() } } } function dropit(e){ if (document.dropmenu03.visibility=="hide") document.dropmenu03.visibility="show" else document.dropmenu03.visibility="hide" document.dropmenu03.left=e.pageX-e.layerX document.dropmenu03.top=e.pageY-e.layerY+19 return false } function hidemenu(){ if (enableeffect) dropmenu03.filters.revealTrans.stop() dropmenu03.style.visibility="hidden" } function hidemenu2(){ document.dropmenu03.visibility="hide" } if (document.layers){ document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK) document.dropmenu01.document.dropmenu02.onclick=dropit } else if (document.all) document.body.onclick=hidemenu </script> <div id="dropmenu03" style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px"> <script language="JavaScript1.2"> if (document.all) dropmenu03.style.padding='4px' for (i=0;i<selection.length;i++) document.write(selection[i]) </script> </div> <script language="JavaScript1.2"> if (document.layers){ document.dropmenu03.captureEvents(Event.CLICK) document.dropmenu03.onclick=hidemenu2 } </script> </body>

Clicca qui