I have a little JS and rail problem. I'm currently using this code to mark a square image I am:
& lt; Html & gt; & Lt; Top & gt; & Lt; Script language = "javascript" & gt; Function poin_it (event) {pos_x = event.offsetx? (Event.offsetX): Event. PageX-document.getElementById ("pointer_div") OffsetLeft; Pos_y = event.offsetY? (Event.offsetY): Event.pageY-document .getElementById ("pointer_div"). OffsetTop; Document.getElementById ("Cross"). Style.left = (pos_x-1); Document.getElementById ("Cross"). Style.top = (pos_y-15); Document.getElementById ("Cross"). Style.visibility = "visible"; Document.pointform.form_x.value = pos_x; Document.pointform.form_y.value = pos_y; } & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Form name = "pointform" method = "post" & gt; & Lt; Div id = "pointer_div" onclick = "point_it (event)" style = "background-image: url (& lt;% = asset_path 'mamma.jpg'% & gt;); width: 900px; height: 720px;" & Gt; & Lt; Img src = & lt;% = asset_path 'point.gif'% & gt; Id = "cross" style = "status: relative; visibility: hidden; z-index: 2;" & Gt; & Lt; / Div & gt; You x = & lt; Input type = "text" is given on the name = "form_x" size = "4" /> - y = & lt; Input type = "text" name = "form_a" size = "4" /> & Lt; / Form & gt; & Lt; / Body & gt; & Lt; / Html & gt; It works like this: There is a big picture (mamma.jpg) and when I click anywhere on this photo, the script below shows text-directional in the textfield Will do Additionally, a picture should be shown on the picture I clicked on.
Now I have two problems: 1) Only in the upper left corner of the square is visible, no matter where I click on it. An easy fix for this?
2) I need to save the coordinates in the database and when I miss this page, then the square should look where I clicked on the previous image. The image is part of a form (I also use it as well).
Now I know that the railway is server-sided and JS is client-side and that I can not communicate directly to them, but there is an easy fix too? Or is it possible to grind it through my controllers?
Thanks in advance!
Try or
Check the source code of the application, this Creates the width and height of CSS along with X and Y. Phantom
Comments
Post a Comment