在网页上单击鼠标的地方显示层，供用户选择地点，同时把用户选择的地点显示在文本框中。主要是控制层的显示、隐藏。
复制代码 代码如下:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>层的隐藏显示练习</TITLE>
<STYLE type="text/css">
<>
</STYLE>
<SCRIPT language="javascript" >
function showMe()
{
document.getElementById("placeLayer").style.left=event.x;
document.getElementById("placeLayer").style.top=event.y;
document.getElementById("placeLayer").style.display="block";
}
function selectPlace(place)
{
document.myform.placeButton.value=place;
document.getElementById("placeLayer").style.display="none";
}
function closeMe( )
{
document.getElementById("placeLayer").style.display="none";
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="myform" method="post" action="">
<TABLE width="58%" height="296" border="0" align="center" background="images/51table_back.gif" >
<TR>
<TD height="36" align="right"></TD>
</TR>
<TR>
<TD height="32">地点：
<INPUT name="placeButton" type="button" value=" 选择/修改"></TD>
</TR>
<TR>
<TD height="209"><P><IMG src="images/next.jpg" width="180" height="186"></P>
<P></P></TD>
</TR>
</TABLE>
</FORM>
<DIV id="placeLayer">
<TABLE width="476" height="109" border="0" cellspacing="0">
<TR align="center">
<TD></TD>
<TD></TD>
<TD></TD>
<TD><A href="javascript: closeMe( )">关闭</A></TD>
</TR>
<TR align="center">
<TD><A href="javascript: selectPlace('北京')" >北京</A></TD>
<TD><A href="javascript: selectPlace('上海')" >上海</A></TD>
<TD><A href="javascript: selectPlace('广州')">广州</A></TD>
<TD><A href="javascript: selectPlace('武汉')">武汉</A></TD>
</TR>
<TR align="center">
<TD><A href="javascript: selectPlace('成都')">成都</A></TD>
<TD><A href="javascript: selectPlace('徐州')">徐州</A></TD>
<TD><A href="javascript: selectPlace('深圳')">深圳</A></TD>
<TD><A href="javascript: selectPlace('珠海')">珠海</A></TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
效果：
本案例也可以修改后用在网页上单击鼠标的地方显示图片、显示菜单等。只要把图片、菜单放到层中即可。
人法地，地法天，天法道，道法自然。
【JavaScript 在网页上单击鼠标的地方显示层及关闭层】相关文章：
★ javascript实现在网页任意处点左键弹出隐藏菜单的方法
★ JavaScript中使用Math.PI圆周率属性的方法
★ Javascript通过overflow控制列表闭合与展开的方法
★ JavaScript实现DIV层拖动及动态增加新层的方法