Displays a layer where the mouse is clicked on a Web page for the user to select a location and to display the user's selected location in a text box. Mainly is the control layer's display, hides.
<HTML>
<HEAD>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<TITLE> Hidden Display Practice </TITLE>
<style type= "Text/css" >
<!--
/* Set Picture button style * *
. Picbutton {Background-image:url (images/buttonback.gif);
border:0 px;
margin:0px;
padding:0px;
height:22px;
width:123px;
font-size:12px;
}
/* Set hyperlink style without underline * *
A
Color:blue;
Text-decoration:none;
}
a:hover{/* Mouse changes color when hovering over hyperlinks
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= "align=" "Right" > </TD>
</TR>
<TR>
<TD height= "style=" "font-size:12px" > Location:
<input name= "Placebutton" type= "button" class= "Picbutton" value= "Select/Modify" onclick= "ShowMe ()" ></TD>
</TR>
<TR>
<TD height= "209" ><p></P>
<P> </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> </TD>
<TD> </TD>
<TD> </TD>
<td><a href= "Javascript:closeme ()" > Close </A></TD>
</TR>
<TR align= "center" >
<td><a href= "javascript:selectplace (' Beijing ')" > Beijing </A></TD>
<td><a href= "Javascript:selectplace (' Shanghai ')" > Shanghai </A></TD>
<td><a href= "Javascript:selectplace (' Guangzhou ')" > Guangzhou </A></TD>
<td><a href= "Javascript:selectplace (' Wuhan ')" > Wuhan </A></TD>
</TR>
<TR align= "center" >
<td><a href= "Javascript:selectplace (' Chengdu ')" > Chengdu </A></TD>
<td><a href= "Javascript:selectplace (' Xuzhou ')" > Xuzhou </A></TD>
<td><a href= "Javascript:selectplace (' Shenzhen ')" > Shenzhen </A></TD>
<td><a href= "Javascript:selectplace (' Zhuhai ')" > Zhuhai </A></TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
