Plot圖像火鍋與onclick驗證

Question

我需要創建圖像熱點類型的問題。管理員上傳圖片並繪製一些區域。 在用戶部分，問題圖像可顯示給用戶與外出的情節。基於用戶的點擊，他點擊了相同的位置或不。我們需要找出

是適用於我的要求的任何預定義api。或任何建議來解決我的問題 。 我的要求與 相似http://articulate-community.s3.amazonaws.com/jeanette/Hotspot/PublishedSample/quiz.html

此類型。

在此先感謝

---

我得到的位置，但我在同一時間下得到問題的鼠標和重新大小。可任何一個可以幫助我，請檢查鏈接
Demo

var plotHotspot = function (e) { 
    console.debug(e); 

     spotCount++; 

     var $hotspot = $('<div id="hotspot_' + spotCount + '"></div>').css({ 
      'position': 'absolute', 
      'display': 'block', 
      'left': (e.pageX - $(this).offset().left) - (e.data.x/2), 
      'top': (e.pageY - $(this).offset().top) - (e.data.y/2), 
      'height': e.data.y, 
      'width': e.data.x, 
      'background': 'url(' + config.icon + ')', 
      'cursor': 'pointer' 
     }).resizable({ handles: "n, e, s, w, se, sw, nw, ne" },{ 
helper: "ui-resizable-helper" 
}); 
     simulateHandleClick($hotspot, 's', e.pageX, e.pageY); 
     $hotspot.draggable(); 

     $imageContainer.append($hotspot); 


     $hotspots = $hotspots.add($hotspot);`enter code here` 

     $hotspot.on('click', initSpotConfig); 
    } 

Answer 1

使用這個代碼

var $hotspot = $('<div id="hotspot_' + spotCount + '"></div>').css({ 
      'position': 'absolute', 
      'display': 'block', 
      'left': (e.pageX - $(this).offset().left) - (e.data.x/2), 
      'top': (e.pageY - $(this).offset().top) - (e.data.y/2), 
      'height': e.data.y, 
      'width': e.data.x, 
      'background': 'url(' + config.icon + ')', 
      'cursor': 'pointer' 
     }).resizable({ handles: "n, e, s, w, se, sw, nw, ne" },{ 
helper: "ui-resizable-helper" 
}); 

並使用觸發事件爲鼠標按下一次

Answer 2

我想在這種情況下，你應該創建與對象例如：

var positions = [{ 
    startX: 100, 
    startY: 100, 
    endX: 150, 
    endY: 150, 
    type: 'some are 1' 
},...]; 

//，然後用鼠標位置relete檢查該元素

var x = evt.pageX - $('#element').offset().left 
var y = evt.pageY - $('#element').offset().top