为图像添加红点和标题答案

【问题标题】：Add a red dot and a title to an image为图像添加红点和标题
【发布时间】：2009-09-02 06:35:01
【问题描述】：

我有一个 html 页面，上面有一张图片，并希望允许用户点击图片来添加一个红点和一个标题到红点。添加一些点后，他应该能够保存或打印它。

使用 ruby on rails、html、css 和（或不使用）javascript 的最佳方法是什么。

【问题讨论】：

这些点应该是用来标记事物的吗？像 facebook 有什么？
是的，点应该标记事物

【解决方案1】：

对于一个非常简单的事情，我会在用户点击的任何地方放一个<div style="position: relative; top: <b>?</b>px; left: <b>?</b>px"><img src="red dot.jpg">Dot title</div>。 onclick在后台做事件触发，这里是how to get the Cursor Position。

position: relative 假设整个事情都在 <div> 块内。看看document.createElement 和appendChild，你会需要它们。

也许您还想在后台保存绘图以将用户正在执行的操作发送到服务器。

【讨论】：

function paint_dot(e, comment){ pitch = document.getElementById("pitch"); div = document.createElement("div"); dot_title = document.createTextNode(comment); div.appendChild(dot_title); style = document.createAttribute("style"); cursor = getPosition(e) style.nodeValue = "position: absolute; top: "+ cursor.y +"px; left: "+ cursor.x +"px; background: url(dot.png) no-repeat; padding -左：10px;”; div.setAttributeNode(style); pitch.appendChild(div); //paint_dot(self.event); }

【解决方案2】：

为了避免往返服务器，您可以直接在浏览器中在图像上绘制点和标题。

可以使用 HTML5 <canvas> 元素、SVG 或 Flash 等来实现。Canvas 有很好的浏览器支持，我会使用它。

【讨论】：

【解决方案3】：

是显示图片库并选择要打印或保存的图片吗？

在表单中嵌入图像表格可能更直接，并使用复选框进行选择。

【讨论】：

【解决方案4】：

一种可能性如下：

使用 Rails 创建包含图像的视图
使用 jQuery 处理点击事件。
当用户点击时显示一个询问标题的 Javascript 对话框
当用户单击确定时，向您的 Rails 控制器发送一个 Ajax 请求，通知您的应用程序有一个新点。
然后控制器应该将该信息添加到数据库或会话中并更新图片，即实际添加带有一些图像库的点，例如 ImageMagick。
然后Ajax请求完成后重新加载图片。

【讨论】：

【解决方案5】：

您可以使用 CSS 创建它。

<div class="image">
  <div class="permalink"><a href="#">Click here.</a></div>
  <img src="#" />
</div>

然后，您的 CSS 应该如下所示：

.image .permalink { display: none; position: absolute; top: 0px; left: 0px; }
.image:hover .permalink { display: block; }
.image .permalink { background: url(red-dot.gif) no-repeat; }

【讨论】：