用户定义的热点的平台/语言选择

Question

当我的网站/ Web应用程序显示图片时，我需要允许用户点击图片时在图片上定义“热点”。 因此，例如，当用户单击图片上的某个点时，被单击的坐标周围1平方厘米处将变为链接。 更具体地说，当用户单击此处定义热点时，将打开一个对话框，要求输入字符串。

对于如何实现这一目标，我几乎持开放态度，但想避免使用Flash，我知道可以轻松地在Flash中实现，但是如果我能保留所有这些javascript / jquery，那将会是一个巨大的尝试救命。

非常感谢您的任何想法。

需要更多上下文：将使用asp .net C＃4进行开发。

Answer 1

您可以使用Java脚本轻松完成此操作。 添加一个点击处理程序，该程序将拦截图像上的所有点击。 找出用户在图像中单击的位置； 最好的方法是相对于图像大小，使图像的顶部和左侧边缘分别为0 ，底部和右侧1 ，因此值0.5,0.5表示用户在中间单击了右键。 然后，您可以使用这些坐标将<div>元素定位在图像上，这些元素是可单击的，有颜色的或需要的颜色。

您只需要足够的Javascript即可获取click事件的坐标，图像尺寸和偏移量以及一些数学知识。

Answer 2

我选择的方法与Deceze所说的有所不同。

这是工作的jsFiddle概述了过程

我真的超越了自我，这主要是因为减退确实让我思考。

这是表的结构。 为了我们的目的，我们将表命名为“ coords”

-------------------------
|  id  |  xpos  |  ypos |
-------------------------
|  0   |   53   |  74   |
|  1   |  217   |  168  |
-------------------------

这是位于图片上方的“叠加层”的点击功能。 ->

$("#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  }
  });
});

在上面，我们将顶部和左侧的值发布到我们的文件中以进行解析并插入到数据库中。 我们还可以在这里建立更多的关系，这只是冰山一角。

我们定义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' });
    });
  }
});

这是我们用来插入和解析从数据库检索到的数据的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   
  }
}

请注意，这仅是示例，并非供生产使用。 显然，您将拥有1张以上的图片，并且需要建立一种关系。 另外，我使用的SQL语句很容易受到攻击，应确保可以实时使用。

祝好运！