快捷導(dǎo)航

JavaScript 在網(wǎng)頁(yè)上單擊鼠標(biāo)的地方顯示層及關(guān)閉層

更新時(shí)間：2012年12月30日 11:10:16 作者：

在網(wǎng)頁(yè)上單擊鼠標(biāo)的地方顯示層，供用戶(hù)選擇地點(diǎn)，同時(shí)把用戶(hù)選擇的地點(diǎn)顯示在文本框中。主要是控制層的顯示、隱藏,感興趣的朋友可以參考下

在網(wǎng)頁(yè)上單擊鼠標(biāo)的地方顯示層，供用戶(hù)選擇地點(diǎn)，同時(shí)把用戶(hù)選擇的地點(diǎn)顯示在文本框中。主要是控制層的顯示、隱藏。

 
<HTML> 
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<TITLE>層的隱藏顯示練習(xí)</TITLE> 
<STYLE type="text/css"> 
<!-- 
/*設(shè)置圖片按鈕樣式*/ 
.picButton { background-image: url(images/buttonBack.gif); 
border:0 px; 
margin: 0px; 
padding: 0px; 
height: 22px; 
width: 123px; 
font-size: 12px; 
} 
/*設(shè)置無(wú)下劃線(xiàn)的超連接樣式*/ 
A { 
color: blue; 
text-decoration: none; 
} 
A:hover{ /*鼠標(biāo)在超鏈接上懸停時(shí)變?yōu)轭伾?/ 
color: red; 
} 
#placeLayer { 
position:absolute; 
/*left:200px; 
top:81px;*/ 
width: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> 
<BODY> 
<FORM name="myform" method="post" action=""> 
<TABLE width="58%" height="296" border="0" align="center" background="images/51table_back.gif" style="background-repeat:no-repeat" > 
<TR> 
<TD height="36" align="right">&nbsp;</TD> 
</TR> 
<TR> 
<TD height="32" style="font-size:12px">&nbsp;地點(diǎn)： 
<INPUT name="placeButton" type="button" class="picButton" value=" 選擇/修改" onClick=" showMe()"></TD> 
</TR> 
<TR> 
<TD height="209"><P><IMG src="images/next.jpg" width="180" height="186"></P> 
<P>&nbsp;</P></TD> 
</TR> 
</TABLE> 
</FORM> 
<DIV id="placeLayer" style="background-repeat:no-repeat"> 
<TABLE width="476" height="109" border="0" cellspacing="0" style="font-size:12px"> 
<TR align="center"> 
<TD>&nbsp;</TD> 
<TD>&nbsp;</TD> 
<TD>&nbsp;</TD> 
<TD><A href="javascript: closeMe( )">關(guān)閉</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> 