Question

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

使用ruby on rails，html，css和（或没有）javascript实现此功能的最佳方法是什么。

Answer 1

一个非常简单的事情，我会在用户点击的地方放置<div style="position: relative; top: ?px; left: ?px"><img src="red dot.jpg">Dot title</div>。后台执行触发的onclick事件，此处为how to get the Cursor Position。

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

也许您还希望将绘图保存在引擎盖下，以便将用户正在做的事情分发给服务器。

Answer 2

要保存到服务器的往返行程，您可以做的是直接在浏览器中绘制图像上的点和标题。

可以使用HTML5 <canvas>元素，SVG或Flash等来实现。画布具有非常好的浏览器支持，我会使用它。

Answer 3

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

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

Answer 4

一种可能性如下：

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

Answer 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; }

为图像添加红点和标题

5 个答案: