【发布时间】：2015-08-24 20:11:53
【问题描述】：
我有一个基于建筑的新项目。在这里，我们将拥有大量建筑架构和工程图的图像集。
这是我尝试这样做的小plunker link 尝试。
我不知道这是否可能，我想点击图片的不同部分，创建标签并根据这些标签进行评论。
可能有人帮我在鼠标单击图像顶部的光标旁边获取弹出框。 创建的标签将用于该部分，下次任何用户想要预览时，可以将鼠标悬停在图像上并将标签视为工具提示，然后关注该标签的评论线程。
我已经尝试过使用 angular，但 Jquery 或任何其他 js 框架都可以，只要它可以工作。
<body ng-controller="MainCtrl">
<br>
<div class='container-fluid'>
<div class='alert alert-info'>
<h4>Click the image and tag</h4>
</div>
<div class='row'>
<div class='col-lg-11'>
<div class='col-sm-11 ' >
<img tagover src='http://www.studioats.com/wp-content/uploads/2011/05/A2-1A-First-Floor-Plan-Area-A-12x18.jpg' height='300' width='500' />
</div>
<div class='col-sm-3 well' >
<p><span class='label label-info'>Comments</span> {{tagName}}</p>
<textarea class='form-control' placeholder='comments here'></textarea>
</div>
</div>
</div>
</div>
脚本
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});
app.directive('tagover', function ($compile,$templateCache,$interpolate) {
var getTemplate = function (contentType,attrs) {
var template = '';
switch (contentType) {
case 'comment':
var template = "<div class='' >";
template += "<input class='form-control' type='text' ng-model='tagName' placeholder='tag name'>";
template += "</div>";
template += "</div>";
break;
}
return template;
} //
return {
restrict: "A",
link: function (scope, element, attrs) {
var popOverContent;
var d = new Date();
var mm = d.getMonth()+1;
popOverContent = getTemplate("comment",attrs);
var compiled = $compile(popOverContent)(scope);
var options = {
content: compiled,
placement: "bottom",
html: true,
date: scope.date
};
$(element).popover(options);
}
};
});
【问题讨论】：
-
我认为首先你应该仔细计划你将如何做到这一点，请看看这个问题，你会大致了解它是如何构建的：“stackoverflow.com/questions/6832964/…”
-
嗨@Shota 感谢您分享您的关注。首先，您的基于 Flash 的示例不起作用。其次，我们有不同的概念。您想在鼠标悬停上显示已经可用的数据，我想从用户那里收集图像的每个部分的数据。
标签： jquery angularjs image tags