Mention how to obtain coordinates of image for area#coords #37469
Description
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
- Folder:
en-us/web/html/element/area - MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/element/area/index.md
- Last commit: 5b20f5f
- Document last modified: 2024-12-19T15:37:45.000Z