JavaScript 在网页上单击鼠标的地方显示层

在网页上单击鼠标的地方显示层，供用户选择地点，同时把用户选择的地点显示在文本框中。主要是控制层的显示、隐藏。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>层的隐藏显示练习</TITLE>
<STYLE type="text/css">
<!--
/*设置图片按钮样式*/
.picButton {    background-image: url(images/buttonBack.gif);
    border:0 px;
margin: 0px;
padding: 0px;
height: 22px;
123px;
font-size: 12px;
}

/*设置无下划线的超连接样式*/
A {
color: blue;
text-decoration: none;
   }
A:hover{ /*鼠标在超链接上悬停时变为颜色*/
   color: red;
   }
#placeLayer {
position:absolute;
/*left:200px;
top:81px;*/
483px;
height:194px;

z-index:2;
background-color: #FFFFFF;
background-image: url(images/layerBack.jpg);
display:none

}
-->
</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>

效果：

本案例也可以修改后用在网页上单击鼠标的地方显示图片、显示菜单等。只要把图片、菜单放到层中即可。