给图像添加一个红点和标题

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

什么是在rails，html，css和（或不带）javascript上实现这一点的最佳方式。

2009-09-02 Beffa

是点应该是，以纪念的东西呢？像Facebook有什么？ – Thomaschaaf 2009-09-02 06:40:59

是的点应标记的东西 – Beffa 2009-09-02 07:47:03

对于一个非常简单的事情，我会在那里用户点击的地方放一个<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，你将需要它们。

也许你还想保存标签底下的标签，以分派用户在服务器上做什么。

来源

2009-09-02 06:49:23 Havenard

函数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）风格。nodeValue =“position：absolute; top：”+ cursor.y +“px; left：”+ cursor.x +“px; background：url（dot.png）no-repeat; padding-left：10px;”; div.setAttributeNode（style）; pitch.appendChild（div）; //paint_dot（self.event）; } – Beffa 2009-09-04 12:17:57

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

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

来源

2009-09-02 06:49:00 pavium

一种可能是以下几点：

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

来源

2009-09-02 06:50:16

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

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

来源

2009-09-02 07:03:21 bucabay

你可以用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; }

来源

2009-09-02 11:49:54

给图像添加一个红点和标题

回答

相关问题