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.
Copy Code code as follows:
<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>
Effect:
This case can also be modified to use on the Web page where the mouse click to display pictures, display menus and so on. Just put the picture, the menu in the layer can be.
Man, Law, Heaven, Heaven, Tao, Tao Nature.