HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>image click coords</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 28rem; }
    #log { margin-top: 12px; padding: 12px; background: #f1f5f9; font-family: monospace; white-space: pre-wrap; min-height: 2rem; }
  </style>
</head>
<body>
  <form>
    <input type="image" name="go" src="https://via.placeholder.com/120x40?text=Click+me" alt="Go">
  </form>
  <div id="log">Click the image button above…</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("input:image").on("click", function (e) {
      $("#log").text("Clicked at pageX=" + e.pageX + ", pageY=" + e.pageY);
      e.preventDefault();
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Click coordinates on input:image (Try It)