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>
我不知道出了什么问题,但是除非我删除图像映射,否则我在登录页面中键入的任何内容都不会显示,它隐藏在图像映射后面,但我希望它出现在我的图像映射上,左侧导航旁边。
您在图像上使用位置:绝对。 添加一个 z 索引: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>
这个^就是我在说的。
快速而肮脏的解决方案
更改以下行
<img style="position: absolute; left:0; top: 0;" border="0" src="images/gen.jpg" usemap="#Map1">
对于这样的东西
<img id="myMap" src="images/gen.jpg" usemap="#Map1">
并在您的 CSS 文件中添加
#myMap {
position: absolute;
left:0;
top: 0;
border:0;
z-index:-999;
}
完整的代码在这里: http://pastebin.com/3HnhkJ8x -- 在最新版本的Chrome和Firefox上测试,未在IE上测试。
推荐的解决方案
您正在使用很久以前就非常不鼓励的技术,例如:
- 图像映射
- 用于格式化的表格
混合了内联CSS和单独的CSS文件;显然,您正在使用PHP将HTML文件包含在另一个HTML文件中,每个文件都有自己的和标签。
我强烈建议您学习和提高您的HTML和CSS知识,并学习最佳的行业实践。