你可以使用HTML和JavaScript來實現點選圖片並獲取座標的功能。以下是一個簡單的示例:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>點選圖片取得座標</title>
</head>
<body>
<img src="your-image.jpg" id="image" alt="圖片">
<p>座標:<span id="coordinates"></span></p>
<script src="script.js"></script>
</body>
</html>
JavaScript(在一個名為script.js
的檔案中):
// 獲取圖片元素
var image = document.getElementById('image');
// 獲取顯示座標的元素
var coordinates = document.getElementById('coordinates');
// 監聽圖片的點擊事件
image.addEventListener('click', function(event) {
// 獲取點擊位置的座標
var x = event.clientX - image.getBoundingClientRect().left;
var y = event.clientY - image.getBoundingClientRect().top;
// 顯示座標
coordinates.textContent = 'X座標:' + x + ',Y座標:' + y;
});
這個示例中,我們首先在HTML中添加了一個圖片元素和一個用於顯示座標的元素。然後,我們使用JavaScript來監聽圖片的點擊事件,並在事件處理程序中計算並顯示點擊位置的X和Y座標。
請將your-image.jpg
替換為您想要使用的圖片,並確保HTML和JavaScript文件位於同一個資料夾中。當您點擊圖片時,它將顯示您點擊的位置座標。