0

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

我对如何实现这一点的所有建议持开放态度，但想避开 Flash，我知道它很容易在 Flash 中实现，但如果我能保留这一切 javascript/jquery，那将是一个巨大的帮助。

非常感谢您的任何想法。

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

4

2 回答 2

2

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

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

于 2012-07-04T14:29:24.600 回答
1

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

这是概述该过程的工作jsFiddle

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

这是表的结构。出于我们的目的，我们将表命名为“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 语句很容易受到攻击，应该保护以供实时使用。

祝你好运！

于 2012-07-04T14:32:49.010 回答