如何在图像的特定点显示注释？

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);