在网页上自动布局笔记和标记

时间:2013-06-06 11:44:01

标签: javascript html css layout screenshot

我想从浏览器窗口自动创建屏幕截图,并在网站上注释一些元素。

我正在考虑写下这样的东西:(伪代码)

  • 放置元素“#login”的注释:“这是登录按钮”

应该添加注释。

我显然必须直接在CSS和/或Javascript中执行此操作,因为在截取屏幕截图后,元素信息将会丢失。

有哪些可行的方法?

我对

感兴趣
  • 注释,箭头等在某些HTML元素旁边的相对位置
  • 自动定位框以避免重叠
  • 以及在这种情况下可能有用的任何其他内容。

我发布了一个可能的草案解决方案,希望有更好的选择

我也对已经存在的模块(jQuery或其他)感兴趣。

1 个答案:

答案 0 :(得分:0)

关于相对定位:

我们想在元素“#login”中添加注释:

  • 插入具有绝对定位的新元素,作为<body&gt;的子元素。节点
  • 通过从元素迭代回到<body>并累加相对位置来获取元素的绝对位置。 (jQuery's position() would help
  • 将note-element的left / top设置为#login的计算绝对位置加上当前宽度

未回答:自动定位