Javascript 如何在图像的特定点显示注释?
要明白我的意思: 请浏览以下网站:(并搜索“史密斯超车”一词) 现在,在文本上方可以看到一个图像,上面有几个标记(圆圈)。当您将鼠标悬停在其中一个按钮上时,将显示一个注释,其中包含图像该部分的附加信息 我主要对输出感兴趣,而不是标记的输入/编辑 我发现了一个名为jQuery的插件,它做了类似的事情。但由于它的编辑器功能,这似乎是一种过分的杀伤力 注释应包含图像、文本和指向其他页面的链接Javascript 如何在图像的特定点显示注释?,javascript,jquery,html,image,Javascript,Jquery,Html,Image,要明白我的意思: 请浏览以下网站:(并搜索“史密斯超车”一词) 现在,在文本上方可以看到一个图像,上面有几个标记(圆圈)。当您将鼠标悬停在其中一个按钮上时,将显示一个注释,其中包含图像该部分的附加信息 我主要对输出感兴趣,而不是标记的输入/编辑 我发现了一个名为jQuery的插件,它做了类似的事情。但由于它的编辑器功能,这似乎是一种过分的杀伤力 注释应包含图像、文本和指向其他页面的链接 你还知道其他可能的解决方案吗?正如HMU ngr在评论中指出的那样:我们使用简单的CSS解决了这个问题,根本没
你还知道其他可能的解决方案吗?正如HMU ngr在评论中指出的那样:我们使用简单的CSS解决了这个问题,根本没有JavaScript
- 使用左/上通过百分比定位点。这使得创建响应性输出成为可能
- 注释是仅在
:hover
我希望这能帮助一些人。正如HMU ngr在评论中指出的那样:我们使用简单的CSS解决了这个问题,根本没有JavaScript
- 使用左/上通过百分比定位点。这使得创建响应性输出成为可能
- 注释是仅在
:hover
我希望这对别人有帮助。如果你自己解决了,太好了-如果你能分享一些代码,那就太棒了 。它可能需要一些改进,并接受一些配置选项,但您得到了一般的想法:)
如果你自己解决了,那就太好了——如果你能分享一些代码那就太棒了 。它可能需要一些改进,并接受一些配置选项,但您得到了一般的想法:)
这就是CSS。在/style/layout_1441719911.css中,第3490行,选择器“.highlight_frame:hover.highlighttext”定义的“可见性:可见”;即css。在/style/layout_1441719911.css中,第3490行,selector“.highlight_frame:hover.highlighttext”defined“visibility:visible;”我负责输入,一个团队成员创建了输出。我还不能发布任何内容,因为该项目尚未完成/公开。我会尽快更新我的答案。我忘了告诉你最新情况。项目的结果可以在这里看到:我负责输入,一个团队成员创建了输出。我还不能发布任何内容,因为该项目尚未完成/公开。我会尽快更新我的答案。我忘了告诉你最新情况。该项目的结果如下所示:
$.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);