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

How to display notes at specific points of an image?

本文关键字：显示 注释 图像      更新时间：2023-09-26

明白我的意思:

请查看以下网站:http://bikeboard.at/Board/Fesche-Waesche-Bikewear-2015-th211009(并搜索术语"Smith Overtake")。

现在你可以在文本上方看到一个图像，上面有几个标记(圆圈)。当你将鼠标悬停在其中一个图像上时，会在图像的该部分显示带有附加信息的注释。

我主要对输出感兴趣，而不是输入/编辑标记。

我发现了一个名为imgNotes的jQuery插件，它做了类似的事情。但由于它的编辑器功能，它似乎是多余的。

注释应该包含图片、文字和到另一个页面的链接。

你还知道其他可能的解决方案吗?

如果你已经自己解决了这个问题，那就太好了——如果你能分享一些代码就太棒了!

这是一个纯jquery、无css的实现。它可以使用一些润色和接受一些配置选项，但你得到了大致的想法:)。

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

正如hm_ngr在评论中指出的那样:我们使用简单的CSS解决了这个问题，根本没有使用JavaScript。

  • 点通过百分比使用左/上定位。这使得创建响应输出成为可能。
  • 注释是简单的div，仅在:hover
    • 上可见

点和注释的输入是一个自定义实现，它通过百分比在我们的数据库中存储左/顶坐标(poster 1:n poster_points)。

相关文章：