个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
因此，一旦有人“标记”了图像的一部分 - 即他们提交了表单，我就尝试向图像添加图标。
我如何在 jQuery 中做到这一点？
需要说明的是...假设您在 flickr 上看到一张图片。你想添加一个注释，你点击你想要的图像，它会显示一个表单域。您输入所需的信息，完成后，图片上方会留下一个小图像，显示您发表评论的位置。
有什么想法吗？
编辑 - 查看代码:
<script type="text/javascript">
$(function() {
var tag_box = $("<div>").appendTo("body").css({
"width": "40px",
"height":"40px",
"border":"4px solid #000000",
"position":"absolute",
"display":"none",
"padding":"15px"
});
var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"});
var comment_icon = $("<img src='images/asterisk_yellow.png' width='16' height='16' alt='Comment'>");
$("#image-wrapper").live("click", function(e) {
tag_box.css({
"left": e.pageX - 40,
"top": e.pageY - 40,
"display": "block"
})
.after(comment_box.css({
"left": e.pageX - 65,
"top": e.pageY + 40
}));
return false;
});
$("form").submit(function() {
var params = $(this).serialize();
$("form")[0].reset();
return false;
});
});
</script>
<body>
<div align="center">
<img src="images/image1.gif" width="760" height="182" alt="image1" id="image-wrapper">
</div>
</body>
我想要做的是当用户点击一个区域时(他们会看到一个方框，显示他们正在标记的位置)。然后他们输入评论，评论存储在一个变量中(目前)，但我想用图像标记该区域(图像的)......在这种情况下它是一个“星号”。所以我想解决方案必须知道坐标或添加评论的地方。我正在研究 offset()，但我对 jQuery 比较陌生，很难将各个部分组合在一起。
最佳答案
一个简单、透明的 PNG 就可以了。假设包含图像列表的标记如下所示:
<ul id="img_list">
<li>
<img src="image.jpg" alt="Image Title" />
<img class="icon" src="annotation.png" alt="You've done XYZ to this." />
</li>
<!-- List continues... -->
</ul>
你可以这样设计它:
#img_list li {
display: block;
width: 50px;
height: 50px;
position: relative;
}
#img_list .icon {
width: 10px;
height: 10px;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
如果你想在 jQuery 中动态添加它，你可以在你的表单的提交成功回调中做这样的事情:
$icon = $("<img class='icon' src='annotation.png' alt='You've done XYZ to this.' />");
$("#img_list li.active").append($icon); // assuming you set class active on the item that's being edited
编辑:确切的功能/样式/标记取决于您网站的外观。由于用户正在浏览图像，我想您会希望使用 AJAX 来提交表单，这样它们就不会丢失它们的位置。如果您有一些我可以查看的代码，我会更精确。
此外，如果有很多不同的图标，您应该使用 CSS sprites 并向图标添加第二类以确定使用哪个 sprite。
编辑 2:This有比我能提供的更多的信息。你只需要在这里和那里修改一些代码就可以得到你想要的效果，但是你可以很容易地添加透明星号作为 SubmitTag 函数的一部分，你只需要拉目标位置(我认为他为此使用变量 targetX 和 targetY)并在标签图标上设置 left 和 right。
关于jquery - 如何在提交表单时将图标/图像叠加到另一个图像上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2752453/
26
4
0
有人有 DirectDraw 叠加的工作示例(代码)吗？就像屏幕上移动的东西一样。我一直试图找到 DirectDraw 叠加用法的示例，但未能找到。 谢谢。 最佳答案 尝试其中一些: from gam
我在 JPanel 中显示缩略图。当将鼠标悬停在此类缩略图上时，我想在缩略图上方的叠加层中显示其完整版本。 使用 HTML，我只需创建一个具有适当位置和高 z-index 的 div，以便它覆盖其他所
好的，所以我想做一个覆盖屏幕。 因此，每当按键为 p 时，屏幕就会暂停并弹出一个屏幕，显示:“按‘q’退出或按‘c’继续，”类似的事情。 谁能告诉我怎么做？ 最佳答案 最简单的方法是使用子模块，然后为
查看我的代码: id mapped! DisplayName (user defined) mapped! Pr
我想为 QListWidget 或 QWidget 等小部件分配背景图像。这是想法: 理想情况下，背景图像会在其小部件大小发生变化时调整大小。有什么想法如何实现它吗？ 稍后编辑: 这是对话的屏幕截图，
我正在尝试设置一个授权方案，我在其中检查 1. 用户已登录 2. 用户有权访问某个对象。为此，我首先调用 maybeAuthId ，然后尝试获取当前对象，并“加入”到另一个列出权限的表。有两个级别的可
我想绘制两个系列的十个 fiddle 图，一个超过第二个: library(ggplot2) #generate some data coco1<-rnorm(10000,0,1) coco2<-c(
有谁知道如何触发在网格加载时显示的股票 jqGrid“正在加载...”叠加层？我知道我可以毫不费力地使用 jquery 插件，但我希望能够使我的应用程序的外观与 jqGrid 中已经使用的外观保持一致
我正在尝试在我的谷歌地图上实现“负”覆盖，类似于您在estately.com上获得的效果。基本上，我已经根据收集的 KML 数据成功绘制了 map 多边形。当有多个路径时，它们绘制得很好。 因此，对我
您好，我正在制作一个 Android 应用程序，它使用地理位置/Google map ，除了选项卡主机之外， map /应用程序上没有任何按钮。所以我需要它，所以如果用户点击 1500 毫秒，就会出现
我正在尝试叠加两个不同的 map ，但我无法叠加它们，并且我不知道如何解决此问题。 let bottom_left = ol.proj.fromLonLat([5.00975294202035
jquery 不是最好的，有人可以建议一个通用的方法来实现我想要实现的目标吗？我有一个照片网格，当它们被点击时，一个不透明的覆盖层将在整个图片之上动画化，覆盖层将包含一些动态设置的文本。我有图像和 o
我想问一下如何为我的 android 应用程序添加不同的叠加层？因为我已经有一个扩展 Overlay 的覆盖类，它根据 KML 文件中的某些点绘制多段线。现在我想创建另一个叠加层，使用 GPS 在用户
我目前正在使用谷歌地图并且是新手..我想知道是否可以将 map 划分为具有确定高度和宽度的某些 tiles 并为它们 color ..如果是，那么有人可以解释如何去做因为我面临困难。 最佳答案 我认为
我有一个用于在我的 MapView 上绘制路径的叠加层，但我注意到它每秒被不必要地重绘大约十次。由于在 draw 方法中我绘制了路径的每一段，这很容易成为效率问题。 出于这个原因，我决定缓存叠加层的内
我是 AR 的新手。但我对我想做什么有一个大概的想法。 我想在 Android 中将 UI 元素叠加在相机输入之上。 这些 UI 元素将根据陀螺仪、gps 输入、通过蓝牙、wifi 等实时更新。 类似
我有一个带有 .xib 的 UICollectionViewCell。 这是 xib 文件的结构 您可以看到同一级别的每个元素以及 3 个 ImageView 和一个按钮。但在运行时，这些元素前面有一
我有一个关于在哪里存储 map 覆盖的大图像的问题。 图片约100MB，不能缩小或在线存储(要求)。我一直在考虑使用 Assets 目录(xcassets)，但它似乎适用于在不同设备上需要调整大小的图
我的应用程序的 css 覆盖了 SmartGWT 中的一些样式并真正降低其性能。 如果我使用 css 文件运行我的应用程序，它太慢了，我什至无法将鼠标悬停在 ListGrid 小部件上。但是，如果我取
我正在制作一个网页，但遇到了问题。当屏幕为 980 像素或更小时，菜单会自行隐藏，屏幕上会出现类似“汉堡包”的按钮菜单。当您单击该按钮时，一个 div 会占据整个屏幕并显示菜单(效果很好)。但是，当您
我是一名优秀的程序员,十分优秀！