Question

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

mapquest图片

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

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

然后在按下提交按钮后，更改图像以在图像地图上显示图标，例如星形。我希望这有多个可用类别，并在用户选中类别和点击提交框后。图像完全改变以显示图标（星形或任何我想要的图标），或者它只是留下图像，只是在图像上添加图标。

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

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

当前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>

Answer 1

根据我理解您的问题的方式，您需要执行一些操作才能在图像上动态添加图标。这是我的方式。

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

在你的图片div中，将其位置设置为relative，将图标设置为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内的任何位置。 （请注意，这些也可以替换为底部和正确）

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

请确认您的图标DIV INSIDE 您的图片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>

用户点击提交按钮后，如何在另一个图像上显示图像或图标？

1 个答案: