用户点击提交按钮后，如何使图像或图标出现在另一个图像上？答案

【问题标题】：After a user hits the submit button, how do I make an image or icon appear over another image?用户点击提交按钮后，如何使图像或图标出现在另一个图像上？
【发布时间】：2018-07-13 20:29:09
【问题描述】：

这个问题是针对一个用 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>

【问题讨论】：

你能发布你的 HTML + 你在 JS 上所做的任何尝试吗？
通常，提交按钮会将您带到另一个页面。那么这涉及到编写 HTML 和 jQuery 代码呢？
我只需要有关从哪里开始寻找 HTML 中的 jQuery 解决方案的帮助。由于我不知道从哪里开始，我没有对 jQuery 进行任何尝试来实现此功能。我通常可以在 google 上找到答案，但我不知道要研究哪些功能..
至少发布您的 HTML？
看看 jQuery 中的 .submit() 事件。 api.jquery.com/submit

标签： javascript jquery html

【解决方案1】：

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

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

在您的图像 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 INSIDE在您的 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>

【讨论】：

感谢您的回复。我会根据你的说法去看看其他人在说什么。稍后我会跳回到这里跟进。