Demo Dynamic HTML - Ventana con un clic del ratón

Ventana con un clic del ratón

Compatibilidad: Ms Internet Explorer, Netscape

Este demo visualiza, haciendo clic en un enlace de texto o imagen, una ventana del tamaño y color deseados cerca del enlace. El resultado que se obtiene con MSIE es aún más sugestivo, dado que se produce un efecto "fade" de la ventana, tanto cuando ésta aparece como cuando desaparece.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

#iewrap2{
position:absolute
}

#dropmenu03{
filter:revealTrans(Duration=1.5,Transition=12)
visibility:hide
}

-->
</style>

</HEAD>

//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://www.htmlpoint.com">HTMLpoint</a><br>'
selection[1]='<a href="http://www.htmlpoint.com/jscript">Jscript</a><br>'
selection[2]='<a href="http://www.htmlpoint.com/java">Applet</a><br>'
selection[3]='<a href="http://www.htmlpoint.com/font">Font</a><br>'
selection[4]='<a href="http://www.htmlpoint.com/xml">Xml</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>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]