如何在圖像的特定點顯示註釋？

Question

看看我的意思：

請看看下面的網站：http://bikeboard.at/Board/Fesche-Waesche-Bikewear-2015-th211009（和搜索術語「史密斯超越」）。

在文本上方，您可以看到一個圖像上有幾個標記（圓圈）。當您將鼠標懸停在其中一張紙上時，會顯示一張紙條，並在圖像的該部分顯示其他信息。

我主要關注輸出，而不是標記的輸入/編輯。

我發現了一個叫做imgNotes的jQuery插件，它做了類似的事情。但由於其編輯功能，它似乎是一個矯枉過正的問題。

筆記應該包含圖像，文本和指向另一頁的鏈接。

您知道哪些其他可行的解決方案？

Answer 1

由於hm_ngr在評論中指出：我們使用簡單的CSS解決了這個問題，根本沒有JavaScript。

• 點使用左/頂部通過百分比定位。這使得創建一個響應輸出成爲可能。
• 的筆記很簡單的div是隻有:hover

點和註釋的輸入是存儲在左側的自定義實現可見光/頂部通過百分比座標，我們的數據庫（海報1：N poster_points） 。

我希望這可以幫助別人。

Answer 2

如果你自己解決了它，太棒了 - 如果你能分享一些代碼，它會很棒！

Here's a jQuery-only, CSS-free implementation。它可以使用一些拋光和接受一些配置選項，但你得到的一般想法:)。

$.fn.addNotes = function(notes){ 
var $img = $(this); 
var pos = $img.position(); 
var w = $img.outerWidth(); 
var h = $img.outerHeight(); 
var offsetX = pos.left; 
var offsetY = pos.top; 
var $imgparent = $img.parent(); 
$imgparent.on('mouseenter','.point', function(){ 
    $(this).next('.note').show(); 
}).on('mouseout', '.point', function(){ 
    $(this).next('.note').hide(); 
}); 
$.each(notes, function(idx,note){ 
    var $point = $('<div/>').addClass('point').css({ 
     position:'absolute', 
     left: (Number(offsetX)+note.pos.x)+'px', 
     top: (Number(offsetY)+note.pos.y)+'px', 
     width: '10px', 
     height: '10px', 
     borderRadius: '10px', 
     background:'#f00' 
    }); 
    var $note = $('<div/>').addClass('note').html(note.note).css({ 
     position:'absolute', 
     left: 15+(Number(offsetX)+note.pos.x)+'px', 
     top: (Number(offsetY)+note.pos.y)+'px', 
     background:'#fff', 
     padding:'5px' 
    }).hide(); 
    $img.after($point); 
    $point.after($note); 
}); 
}; 

使用範例：

var notes = [ 
{ pos: { x: 100, y: 100 }, note: 'Hello world!' }, 
{ pos: { x: 200, y: 100 }, note: 'Hello Harry!' }, 
{ pos: { x: 100, y: 200 }, note: 'Hello Ron!' }, 
{ pos: { x: 300, y: 300 }, note: 'Hello Hermione!' } 
]; 

$('img').addNotes(notes);