Add a red dot and a title to an image

Question

I've got a html-page with a picture on it and would like allow the user to click on the image to add a red dot and a title to the red dot. After adding some dots he should be able to save or print it.

What's the best way to implement this with ruby on rails, html, css and (or without) javascript.

Answer 1

Is it a matter of showing a gallery of pictures and selecting which ones to print or save?

It might be more straightforward to embed a table of images in a form, and use checkboxes to make selections.

Answer 2

For a very simple thing, I would put there a <div style="position: relative; top: ?px; left: ?px"><img src="red dot.jpg">Dot title</div> wherever user clicked. onclick event in the background to do the trigger, and here is how to get the Cursor Position.

position: relative assuming that the whole thing is inside a <div> block. Take a look at document.createElement and appendChild, you will need them.

Maybe you want also to save the plottings under the hood to dispatch what's user doing to the server.

Answer 3

One possibility would be the following:

• Create the view containing the image with Rails
• Handle the click events with jQuery.
• When the user clicks show a Javascript dialog asking for the title
• When the user clicks OK, send an Ajax request to your Rails controller notifying your application about a new dot.
• The controller then should add that information to a database or the session and update the picture, i.e. actually add the dot with some image library, like ImageMagick for example.
• Then re-load the picture after the Ajax request is completed.

Answer 4

To save doing round trips to the server, what you could do is to draw the dot and title on the image directly in the browser.

It can be achieved with the HTML5 <canvas> element, SVG, or Flash etc. Canvas has very good browser support, I'd use that.

Answer 5

You could possibly create this with CSS.

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

Then, your CSS should look like this:

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