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

这个问题是用HTML编码的网站。用户点击提交按钮后，如何使图像或图标显示在另一图像上？

Mapquest服务形象

*我把从谷歌上面的图片（位于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>

来源

2013-06-18 JMan

你可以发布你的HTML +任何你在JS做的尝试吗？ – lifetimes

正常情况下，提交按钮会将您带到另一个页面。那么这涉及到编码你的HTML和jQuery代码呢？ – jtheman

我只需要帮助从哪里开始寻找HTML中的jQuery解决方案。我还没有尝试jQuery的这个功能，因为我不知道从哪里开始。我通常可以在google上找到答案，但我不知道要查看哪些功能。 – JMan

基于我明白你的问题的方式，也有需要，以对图像的顶部动态添加图标做了几件事情。这是我会这样做的方式。

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

在你的形象格，设置它的位置，相对的，和图标对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的高度和宽度规则为了让他们出现。

确保您的ICON DIV IS 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>

来源

2013-06-18 23:13:22 David

谢谢你的回应。我会跟你说的一起去看看别人在说什么。稍后我会回到这里跟进。 – JMan

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

回答

相关问题