-------------------------
|  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语句是易受攻击的，应该为实时使用提供安全保护。

祝好运!

票数 1

Stack Overflow用户

发布于 2012-07-04 14:29:25

你可以很容易地在Javascript中做到这一点。添加一个点击处理程序，它将拦截图像上的所有点击。找出用户在图像中点击的位置；最好的方法是使其相对于图像大小，图像的上边缘和左边缘为0，下边缘和右边缘为1，因此0.5,0.5值表示用户在中间右单击。然后，您可以使用这些坐标在图像上定位<div>元素，这些元素可以是可单击的、彩色的或您需要的任何形式。

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11330876

复制

MySQL 子查询嵌套查询

exists mysql select 语法

意思就是内层的select查到了(至少查到了一行)才进行查询，没有查到就不进行查询。

宁在春

2022/10/31

12.1K0