Image 如何将内容保留在图像地图区域内

下面是我的工作：

但这正是我想要的：

我有一个div包含我的表单：

<div id="wrapper">
    <div id="content-pad">
        <div id="mid-col-wide">
<form name="contactform" method="post" action="contact/send_form_email.php">
<table width="450px">
<tr>
 <td valign="top">
  <label for="first_name">Full Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="full_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Message *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>
</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">
 </td>
</tr>
</table>
</form>
</div><!-- //mid-col -->

    </div><!-- //content-pad -->

</div><!-- //wrapper -->

全名*
电子邮件地址*
信息*

然后我有一个单独的div，它包含一个带有多个链接的图像映射：

<div align="center">
<img name="emp" src="contact/main.jpg" usemap="#ep" alt="Mammal Swag" width="940" height="801" border="0"/>
<map name="ep">
<area shape="poly" coords="20,144,176,159,183,222,42,223,20,144" href="about.html" onMouseOver="changeabout()" onMouseOut="changemain()"/>
<area shape="poly" coords="49,228,184,228,192,289,118,315,36,265,49,228" href="index.html" onMouseOver="changecontact()" onMouseOut="changemain()"/>
<area shape="poly" coords="675,639,692,607,773,607,754,713,693,712,675,639" href="http://www.facebook.com/MammalSwag" onMouseOver="changefacebook()" onMouseOut="changemain()"/>
<area shape="poly" coords="185,159,370,149,320,243,199,285,185,159" href="index.html" onMouseOver="changehome()" onMouseOut="changemain()"/>
<area shape="poly" coords="821,536,877,626,766,694,779,606,821,536" href="http://www.twitter.com/MammalSwag" onMouseOver="changetwitter()" onMouseOut="changemain()"/>  
</map>
</div>

我想让我的联系人表单div保持在那个大的绿色空间内。因此，当窗口调整大小时，联系人表单div仍然位于绿色空间内的同一位置

---

如何使用图像映射调整联系人表单div的大小？

在我开始担心这些字段的位置之前，我会先处理一下图像映射的热点。图像上的热点可以正常工作。第二个链接只是我制作的一个.jpg模型，显示我需要做什么。哦，你解决了。好的……无论如何，您需要做的是将表单与img放在同一个容器中（即，两者都放在img所在的

div align=“center”>

中）。这样，它们就不会彼此独立移动。您的页面本身有点复杂，但我在这篇文章中做了一个简单的例子：它有一些问题，因为它在所有浏览器上看起来都不一样，但我希望您可以使用它。