Question

当我的网站/网络应用程序显示图片时，我需要允许用户在图片上的任何位置定义“热点”。因此，例如，当用户点击图片上的一个点时 - 被点击的坐标周围的1cm²将成为链接。更具体地说 - 当用户点击那里定义热点时 - 会打开一个对话框，要求输入一个字符串。

我对所有关于如何实现这一目标的建议持开放态度，但希望避开闪存，我知道它很容易在闪存中实现但是如果我可以保留所有的javascript / jquery它是一个巨大的帮助。

非常感谢任何想法。

更多上下文：它将使用asp .net C＃4开发。

Answer 1

您可以在Javascript中轻松完成此操作。添加一个点击处理程序，拦截图像上的所有点击。找出用户点击图像的位置;最好的方法是使图像相对于图像大小，图像的上边缘和左边缘为0，左下角1，因此值0.5,0.5表示用户点击中间的右边。然后，您可以使用这些坐标在图像上定位<div>元素，这些元素是可点击的，彩色的或任何您需要的元素。

您只需要足够的Javascript来获取点击事件的坐标，图像尺寸和偏移以及一些数学。

Answer 2

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

Here's the working jsFiddle outlining the process

我真的超越了，主要是因为deceze真让我思考。

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

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

这是位于图片顶部的“叠加”的点击功能。 - ＆gt;

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

在上面，我们将top和left值发布到我们要解析的文件并插入到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' });
    });
  }
});

这是我们用来插入和解析从数据库中检索的数据的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语句易受攻击，应该保护以供实时使用。

祝你好运！

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

2 个答案: