1

此问题适用于以 HTML 编码的网站。

地图任务图片

*我从谷歌（位于 mapquest.com）上提取了上面的图片，我不拥有这张图片。话虽如此，请看这张照片作为参考，以解决我的问题。假设这张图片不是以星号开头的，只有在用户点击提交按钮后才会出现。

我将如何在 html 中编码（假设 jquery 或 javascript）让用户选中一个框。示例：分类：鞋子 ▢ [提交]

然后在按下提交按钮后，将图像更改为在图像地图上出现一个图标，例如星形。我希望它有多个可用类别，并且在用户选中类别框并单击提交之后。要么图像完全改变以显示图标（星号，或者我想要的任何图标），要么它只是离开图像并只是在图像上添加图标。

编辑：我正在添加这个以希望缩小我在回答这个问题时正在寻找的内容。如果您不想逐行浏览，我不需要我的手，但即使是链接也足够了。谢谢。

我正在寻找有关如何编码的更具体的细节。我认为每次更改整个图像都不会那么有效，那么如何使用图像映射之类的东西将图标放在图像上，以便它在图像上的适当坐标处下降？就像你在谷歌地图上搜索并且图标落在图像上一样（显然不是那么复杂，但你明白了）。

当前的 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome | xxxxxx.com </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body style="margin:0px; padding: 0px;">
<div class="container">
  <div class="header"><img src="images/bg_header1.png" width=950px usemap="#Map" border="0"/>
    <map name="Map" id="Map">
      <area shape="rect" coords="475,28,572,71" href="#" alt="about" />
      <area shape="rect" coords="609,27,746,71" href="#" alt="locations" />
      <area shape="rect" coords="783,27,894,73" href="#" alt="contact" />
      <area shape="rect" coords="55,23,278,61" href="index.html" alt="home" />
    </map>
  </div>
  <div class="content"><img src="images/parismap1.fw.png" width=950px/>
  </div>
  <div class="footer"><img src="images/bg_footer1.fw.png" width=950px/></div>
</div>
</body>
</html>
4

1 回答 1

1

根据我理解您的问题的方式，您需要做一些事情才能在图像顶部动态添加图标。这是我会做的方式。

首先，在不更改图像的情况下在图像顶部移动图标的好方法是使用 CSSposition规则。

在您的图像 div 中，将其位置设置为相对，并将图标设置为position:absolute，如下所示：

#imageDiv
{
    background: url("/images/image.png");
    position: relative;
}

#iconDiv
{
    background: url("/images/icon.png");
    position: absolute;
    top: 0px;
    left: 0px;
}

然后通过调整top和left规则，您可以将图标移动到图像 div 内的任意位置。（请注意，这些也可以替换为bottom和right）

希望我不需要告诉您，您还需要为每个 div 指定高度和宽度规则，以便它们显示出来。

确保您的 ICON DIV在您的 IMAGE DIV 内：

<div id="imageDiv">
    <div id="iconDiv">
    </div>
</div>

其次，您需要一个 javascript 函数来调整 CSS 规则。如果您希望它在使用提交按钮的表单中，您还需要在提交功能上返回 false，这样它就不会带您进入action页面：

$(document).ready(function(){
    $("form").submit(function(){
        //Update CSS Here in a way similar to this:
        $("#imageDiv").css({"top":someValue+"px", "left":someOtherValue+"px"});

        return false;
    }
}

这是一种方法。希望有帮助。

注意：这个解决方案需要 jQuery！

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
于 2013-06-18T23:13:22.280 回答