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

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.