+ Start a Discussion
Jim BoudreauxJim Boudreaux 

Capturing X and Y When Clicking an Image

I want to have a form which includes fields for a custom object. This is pretty straightforward for most of the fields, except two of them, X__c and Y__c. To fill these two fields I want the user to click an image, and I want to capture the X and Y coordinates of the click and fill the two fields accordingly.


Message Edited by Jim Boudreaux on 12-24-2009 08:09 AM
Jim BoudreauxJim Boudreaux

Here's some sample code, why won't this work?


<apex:form id="Show"><apex:inputtext id="MouseX" value="{!editInspectionResult.X__c}" /> X<br/><apex:inputtext id="MouseY" value="{!editInspectionResult.Y__c}" /> Y<br/> <div style="width:970px; height:598px;"> <apex:repeat value="{!faresults}" var="ir"> <!--this custom component places an image at the X and Y coordinates--> <c:devicon result="{!ir.Result__c}" type="{!ir.Device_Type__c}" width="10px" X="{!ir.X__c}px" Y="{!ir.Y__c}px" number="{!round(ir.Device_Number__c,0)}"/> </apex:repeat> <apex:image id="floorplan" onclick="GetImageLocation('floorplan')" url="{!URLFOR($Action.Attachment.Download, floor.floorplan)}" /> </div> </apex:form> <script> function GetImageLocation(image) { var floorplan = document.getElementById("{!$Component.floorplan}"); var MouseX = document.getElementById("{!$Component.MouseX}"); var MouseY = document.getElementById("{!$Component.MouseY}"); var x = (document.layers) ? image.x : image.offsetLeft; var y = (document.layers) ? image.y : image.offsetTop; document.Show.MouseX.value = x; document.Show.MouseY.value = y;}</script>





You can use a JS function to capture the Co-Ordinates.

Then, place the 2 fields "X__c" and "Y__c" as two hidden fields on your page. Set the values of these in the JS.

This should fetch you the requisite values, whenever the user clicks on the image!


Jim BoudreauxJim Boudreaux
Yes, I realize that, but I am not a JS expert, I'm not even an advanced novice, so I have been reduced to copying and pasting code from around the net. The only problem is this code, while working in the examples online, do not work when I try them in VF. I was hoping someone could post some actual working code for me, or at least explain why normal JS and HTML examples don't work in VF and how to fix them so they do.