Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

coords attribute values of area element #37469

Open
hari12125 opened this issue Jan 2, 2025 · 0 comments
Open

coords attribute values of area element #37469

hari12125 opened this issue Jan 2, 2025 · 0 comments
Labels
Content:HTML Hypertext Markup Language docs needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.

Comments

@hari12125
Copy link

hari12125 commented Jan 2, 2025 •
edited by caugner
Loading

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

What specific section or headline is this issue about?

DEMO

What information was incorrect, unhelpful, or incomplete?

The coords attribute values of area elements must have been derived on the basis of coordinates of image element. But, no information is provided regarding how to obtain the coordinates of image element on which the clickable areas of map element are superimposed.

What did you expect to see?

Please provide the code to obtain coordinates of image element and use it as basis to choose the coords attribute values of area elements in the map element.

Do you have any supporting links, references, or citations?

<!--HTML Example to Capture Click Coordinates-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Coordinate Capture</title>
  <style>
    #myImage {
      border: 2px solid #ccc;
      max-width: 100%;
    }
    #coords {
      margin-top: 20px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Click on the Image to Get Coordinates</h1>
  <img id="myImage" src="https://via.placeholder.com/600x400" alt="Placeholder Image">
  <div id="coords">Coordinates will appear here.</div>

  <script>
    const img = document.getElementById('myImage');
    const coordsDisplay = document.getElementById('coords');

    img.addEventListener('click', (event) => {
      const rect = img.getBoundingClientRect(); // Get image's position
      const x = Math.round(event.clientX - rect.left); // X coordinate
      const y = Math.round(event.clientY - rect.top);  // Y coordinate

      coordsDisplay.textContent = `Clicked at: X=${x}, Y=${y}`;

      // Example output for use in an <area> element
      console.log(`<area shape="rect" coords="${x - 10},${y - 10},${x + 10},${y + 10}" href="#" alt="Clickable Region">`);
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Coordinate Capture</title>
  <style>
    #myImage {
      border: 2px solid #ccc;
      max-width: 100%;
    }
    #coords {
      margin-top: 20px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Click on the Image to Get Coordinates</h1>
  <img id="myImage" src="https://via.placeholder.com/600x400" alt="Placeholder Image">
  <div id="coords">Coordinates will appear here.</div>

  <script>
    const img = document.getElementById('myImage');
    const coordsDisplay = document.getElementById('coords');

    img.addEventListener('click', (event) => {
      const rect = img.getBoundingClientRect(); // Get image's position
      const x = Math.round(event.clientX - rect.left); // X coordinate
      const y = Math.round(event.clientY - rect.top);  // Y coordinate

      coordsDisplay.textContent = `Clicked at: X=${x}, Y=${y}`;

      // Example output for use in an <area> element
      console.log(`<area shape="rect" coords="${x - 10},${y - 10},${x + 10},${y + 10}" href="#" alt="Clickable Region">`);
    });
  </script>
</body>
</html>

Do you have anything more you want to share?

No response

MDN metadata

Page report details
@hari12125 hari12125 added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Jan 2, 2025
@github-actions github-actions bot added the Content:HTML Hypertext Markup Language docs label Jan 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Content:HTML Hypertext Markup Language docs needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@hari12125