此问题适用于使用 HTML 编码的网站。
map task 图像
*我从谷歌(位于mapquest.com)上提取了上面的图像，我不拥有该图像。话虽如此，请看这张图片作为引用来回答我的问题。假设该图像不以星号开头，仅在用户单击提交按钮后出现。
我如何在 html 中编码(假设 jquery 或 javascript)来让用户选中一个框。示例:类别:鞋子 ▢ [提交]
然后按下提交按钮后，更改图像以在图像 map 上显示一个图标，例如星星。我希望它有多个可用类别，并且在用户选中类别框并单击提交后。图像要么完全更改以显示图标(星号，或任何我想要的图标)，要么只是保留图像并仅在图像上添加图标。
编辑:我添加此内容是为了缩小我正在寻找的回答这个问题的范围。如果您不想逐行浏览，我不需要我的手，但即使是一个链接也足够了。谢谢。
我正在寻找有关如何编码的更具体细节。我不认为每次更改整个图像都那么有效，那么如何使用图像映射之类的东西将图标放在图像上，以便它放置在图像上的适当坐标处？就像您在谷歌地图上搜索一样，图标会掉落到图像上(显然不是那么复杂，但您明白了)。
当前 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>
最佳答案
根据我对您问题的理解，您需要执行一些操作才能在图像顶部动态添加图标。这就是我的做法。
首先，在图像顶部移动图标而不更改图像的一个好方法是使用 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 指定高度和宽度规则才能让它们显示出来。
确保您的图标 DIV 位于图像 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>
关于javascript - 用户点击提交按钮后，如何使图像或图标显示在另一个图像上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17180314/