You need to sign in to do that
Don't have an account?
Jim 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.
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!
Cool_D