用戶定義的熱點的平台/語言選擇

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語句很容易受到攻擊，應確保可以實時使用。

祝好運！