如何使带USEMAP的图片实现原有按钮的POST提交功能？

嘿，我完全懂你的困扰——<area>标签默认只能走GET跳转，没法直接像表单按钮那样传递POST参数对吧？别担心，这里有两个实用的方案帮你实现需求，完美替代原来的按钮功能：

方案一：JavaScript + 隐藏表单（最推荐） #

这个方案灵活适配任何<map>形状，还能轻松复用原有房间状态判断逻辑：

步骤说明 #

1. 先在页面中创建一个隐藏的POST表单，里面放一个用于传递方向的隐藏输入框；
2. 给每个罗盘区域的<area>绑定点击事件，点击时设置隐藏输入框的值为对应方向，然后触发表单提交；
3. 保留原有$room->xxx>0的判断逻辑，给不可点击的区域添加禁用状态（阻止提交+视觉提示）。

代码示例 #

<!-- 隐藏的POST提交表单 -->
<form id="compassForm" action="bddmain.php" method="post" style="display: none;">
  <input type="hidden" name="dir" id="dirInput">
</form>

<!-- 罗盘图片与映射区域 -->
<img src="你的罗盘图片路径.png" usemap="#compassMap" alt="方向罗盘">
<map name="compassMap">
  <!-- 北方向区域 -->
  <area 
    shape="poly" 
    coords="100,0,150,50,50,50" 
    onclick="submitDir('north')"
    <?php if ($room->north <= 0) echo 'class="disabled" onclick="return false;"'; ?>
    alt="北">
  
  <!-- 东方向区域 -->
  <area 
    shape="poly" 
    coords="200,100,150,50,150,150" 
    onclick="submitDir('east')"
    <?php if ($room->east <= 0) echo 'class="disabled" onclick="return false;"'; ?>
    alt="东">
  
  <!-- 南、西方向同理，替换coords和方向值即可 -->
</map>

<script>
function submitDir(direction) {
  // 设置要传递的方向参数
  document.getElementById('dirInput').value = direction;
  // 触发表单POST提交
  document.getElementById('compassForm').submit();
}
</script>

<style>
/* 给禁用的区域添加视觉提示 */
area.disabled {
  cursor: not-allowed;
}
</style>

方案二：纯HTML/CSS——用透明按钮覆盖罗盘区域 #

如果你不想用JavaScript，可以用绝对定位把透明的表单按钮放在罗盘对应的位置，点击按钮直接触发POST提交：

代码示例 #

<!-- 表单包裹罗盘和按钮，用相对定位作为容器 -->
<form action="bddmain.php" method="post" style="position: relative; display: inline-block;">
  <img src="你的罗盘图片路径.png" alt="方向罗盘" style="display: block;">
  
  <!-- 北方向按钮：绝对定位到罗盘对应区域，设置透明 -->
  <button 
    type="submit" 
    name="dir" 
    value="north"
    style="position: absolute; top: 0; left: 50px; width: 100px; height: 50px; opacity: 0; cursor: pointer;"
    <?php if ($room->north <= 0) echo 'disabled'; ?>
  >北</button>
  
  <!-- 东方向按钮 -->
  <button 
    type="submit" 
    name="dir" 
    value="east"
    style="position: absolute; top: 50px; left: 150px; width: 50px; height: 100px; opacity: 0; cursor: pointer;"
    <?php if ($room->east <= 0) echo 'disabled'; ?>
  >东</button>
  
  <!-- 其他方向按钮同理，调整top/left/width/height到对应位置 -->
</form>

方案对比 #

• 方案一：适配任意复杂的<area>形状，逻辑清晰，易于维护，适合大部分场景；
• 方案二：无需JavaScript，但需要精确计算每个按钮的位置和尺寸，对响应式布局不够友好，适合固定尺寸的罗盘图。

另外，关于up/down/out/reset/DM这些功能，你可以用同样的逻辑扩展——比如给对应的区域绑定JS事件，或者添加额外的透明按钮，完全复用原有角色ID判断和状态控制逻辑就行。

内容的提问来源于stack exchange，提问作者BrianDP