为用户定义的热点选择平台/语言
当我的网站/web应用程序显示一张图片时，我需要允许用户在他们点击的任何地方定义图片上的“热点”。例如，当用户点击图片上的一个点时，被点击的坐标周围的-1 co²将成为一个链接。更具体地说，当用户单击此处定义热点时，将打开一个对话框，要求输入字符串。
我对如何实现这一点的所有建议都持开放态度，但我想避开flash，我知道这很容易在flash中实现，但如果我能保留所有的javascript/jquery，那将是一个巨大的帮助。
非常感谢你的任何想法。
更多信息:它将使用asp .net C# 4开发。
回答 2
Stack Overflow用户
发布于 2012-07-04 22:32:49
我选择了一种与Deceze所说的不同的方法。
Here's the working jsFiddle outlining the process
我真的超越了，主要是因为deceze真的让我思考。
这是表的结构。出于我们的目的，我们将该表命名为'coords'
-------------------------
| id | xpos | ypos |
-------------------------
| 0 | 53 | 74 |
| 1 | 217 | 168 |
-------------------------这是位于图像顶部的'Overlay‘的点击功能。 ->
$("#imgOver").click(function(event) {
var parentOffset = $(this).parent().offset();
var defTop = event.pageY - parentOffset.top - 25;
var defLeft = event.pageX - parentOffset.left - 25;
$(this).append('<div class="addLink" style="top:'+defTop+'px;left:'+defLeft+'px;"> Link </div>')
$.ajax({
type: 'POST',
url: 'hotspots.php',
data: {'top' : defTop, 'left': defLeft }
});
});在上面的代码中，我们将顶部和左侧的值发布到我们的文件中，以便解析出来并插入到DB中。我们还可以在这里创建更多的关系，这只是冰山一角。
我们将hotspots.php定义为服务/处理坐标请求的文件。
这是在页面加载时检索坐标并将它们放入图像中的函数。
$.ajax({
type: 'GET',
url: 'hotspots.php',
data: 'hotspots=true',
success: function(data){
$(data).appendTo('#imgOver');
$.each($('#imgOver').find('.addLink'), function(i,obj){
var coordData = $(this).attr('rel');
coordData = coordData.replace(' ', '');
coordData = coordData.split('/');
$(obj).css({'top' : coordData[1]+'px', 'left' : coordData[0]+'px' });
});
}
});这是我们用来插入和解析从DB检索到的数据的PHP代码。
if(!empty($_POST['top']) && !empty($_POST['left'])){
$qstr = "INSERT INTO coords(xpos, ypos) VALUES('".$_POST['left']."', '".$_POST['top']."')";
$q = mysql_query($qstr);
}
if(!empty($_GET['hotspots']) && $_GET['hotspots'] == 'true'){
$qstr1 = "SELECT * from coords";
$q1 = mysql_query($qstr1);
while($row = mysql_fetch_array($q1)){
?>
<div class="addLink" rel="<?php echo $row['xpos'] ?> /<?php echo $row['ypos'] ?>"> Link </div>
<?php
}
}请注意，这只是一个示例，并不打算用于生产。显然，你会有不止一张照片，并且需要发展一段关系。此外，我所使用的SQL语句是易受攻击的，应该为实时使用提供安全保护。
祝好运!
Stack Overflow用户
发布于 2012-07-04 22:29:25
你可以很容易地在Javascript中做到这一点。添加一个点击处理程序，它将拦截图像上的所有点击。找出用户在图像中点击的位置；最好的方法是使其相对于图像大小，图像的上边缘和左边缘为0，下边缘和右边缘为1，因此0.5,0.5值表示用户在中间右单击。然后，您可以使用这些坐标在图像上定位<div>元素，这些元素可以是可单击的、彩色的或您需要的任何形式。
您所需要的只是足够的Javascript来获取单击事件的坐标、图像尺寸和偏移量以及一些数学运算。
https://stackoverflow.com/questions/11330876
复制相似问题
腾讯云开发者
