0

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>

我不知道出了什么问题，但是我在登录页面中输入的任何内容都不会出现，除非我删除我的图像地图，它隐藏在图像地图的后面，但我希望它出现在我的图像地图上，在左侧导航旁边。

4

2 回答 2

0

快速而肮脏的解决方案

更改以下行

<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 知识，并学习最佳行业实践。

于 2013-01-22T16:07:29.017 回答
0

您在图像上使用位置：绝对。添加 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>

这个^就是我说的。

于 2013-01-22T15:54:31.563 回答