在 php 中的图像映射
<html>
<body>
<img style="position: absolute; left:0; top: 0;" border="0" src="images/gen.jpg" usemap="#Map1">
<map id="Map1" name="Map1">
<area shape="rect" coords="136,331,211,351" name="home" a href="home.php">
<area shape="rect" coords="136,379,244,400" name="aboutus" a href="aboutus.php">
<area shape="rect" coords="136,426,247,447" name="calculate" a href="">
<area shape="rect" coords="136,475,262,495" name="contactus" a href="">
</body>
</html>
我的CSS
@charset "utf-8";
/* CSS Document */
<style type="text/css">
A:link
{ text-decoration: none; color: black; cursor:crosshair; }
A:visited
{ text-decoration: none; cursor:crosshair; color: black; }
A:active
{ text-decoration: none; cursor:crosshair; color:black; }
A:hover {
text-decoration: none; color: #705551; background-color:black; font weight:none; cursor:help;}
body
{ background: #c0c2c3;
font-family: georgia;
color: #4a458d;
font-size: 10pt;
cursor: s-resize;
}
td
{ font-family: Verdana;
font-size: 10px;
color: #4a458d;
cursor: crosshair;
text-align: left;
margin: 0px;}
}
textarea, input, select {
font-family : trebuchet ms;
font-size: 10px;
color:#4a458d;
cursor: crosshair;
border-color: silver;
border-style: solid;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
}
.head
{font-family: georgia;
font-weight: none;
letter-spacing:-3px;
font-size: 17pt;
line-height: 16pt;
color: #48457b;
border-top: 0px solid;
border-bottom: 1px solid black;
border-right: 0px solid;
border-color: none;
background-color:#c0c2c3;
text-align: left;
text-transform: uppercase;
}
.head2
{font-family: georgia;
font-weight: none;
letter-spacing:2px;
font-size: 7pt;
line-height: 10pt;
color: #443f80;
border-top: 0px solid;
border-bottom: 1px solid black;
border-right: 0px solid;
border-color: none;
background-color:#c0c2c3;
text-align: left;
text-transform: none;
}
我的php登录页面代码
<html>
<body>
<link rel="stylesheet" href="style.css">
<?php
include("map.php");
?>
<form method="post" action="checklogin.php">
<table width="450" height="88" border="0" align="left">
<tr>
<td width="180">Enter your email</td>
<td width="270">
<input name="email" type="text" size="30" /></td>
<tr>
<td>Enter your password</td>
<td><input type="password" name="password" type="text" size="30" /></td></tr>
<tr><td colspan="2"><input type="submit" name="Submit" value="Login" /></td></tr></table>
</form>
</div>
</body></html>
我不知道出了什么问题，但是除非我删除我的图像映射，否则我在登录页面中输入的任何内容都不会出现，它隐藏在图像映射后面，但我希望它出现在我的图像映射上，在导航旁边离开了。
最佳答案
您在图像上使用了 position:absolute。添加一个 z-index:1;然后将其余的包裹在一个容器中，也用绝对值，并给它一个 z-index:2
编辑
一页解决方案，仍然是错误的形式，但是:
<html>
<head>
<style>
A:link
{ text-decoration: none; color: black; cursor:crosshair; }
A:visited
{ text-decoration: none; cursor:crosshair; color: black; }
A:active
{ text-decoration: none; cursor:crosshair; color:black; }
A:hover {
text-decoration: none; color: #705551; background-color:black; font weight:none; cursor:help;}
body
{ background: #c0c2c3;
font-family: georgia;
color: #4a458d;
font-size: 10pt;
cursor: s-resize;
}
td
{ font-family: Verdana;
font-size: 10px;
color: #4a458d;
cursor: crosshair;
text-align: left;
margin: 0px;}
}
.imap{
position: absolute; left:0; top: 0; z-index:1;
}
.pgwrap{
position:absolute; left:0; top: 0; z-index:2;
}
</style>
</head>
<body>
<div class="pgwrap">
<div class="imap">
<img style="" border="0" src="images/gen.jpg" usemap="#Map1">
<map id="Map1" name="Map1">
<area shape="rect" coords="136,331,211,351" name="home" a href="home.php">
<area shape="rect" coords="136,379,244,400" name="aboutus" a href="aboutus.php">
<area shape="rect" coords="136,426,247,447" name="calculate" a href="">
<area shape="rect" coords="136,475,262,495" name="contactus" a href="">
</map>
</div>
<form method="post" action="checklogin.php">
<table width="450" height="88" border="0" align="left">
<tr>
<td width="180">Enter your email</td>
<td width="270">
<input name="email" type="text" size="30" /></td>
<tr>
<td>Enter your password</td>
<td><input type="password" name="password" size="30" /></td></tr>
</tr>
<tr><td colspan="2"><input type="submit" name="Submit" value="Login" /></td></tr></table>
</form>
</div>
</body>
这 ^ 就是我所说的。
关于html - 我的图像映射覆盖了我的整个网站、文字、表格等，如何解决？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14462497/