<!DOCTYPE html>
<html>
<head>
<title>画像にピンを指す</title>
<style>
#container {
position: relative; /* ピンを絶対配置するために必要 */
display: inline-block; /* 画像に合わせて高さを調整 */
}
#image {
max-width: 100%;
height: auto;
}
.pin {
position: absolute;
width: 20px; /* ピンのサイズに調整 */
height: 20px;
background-color: red; /* ピンの色をイメージ */
border-radius: 50%; /* 丸いピンにする */
cursor: pointer;
transform: translate(-50%, -100%); /* ピンの中心を指すように調整 */
}
</style>
</head>
<body>
<div id="container">
<img id="image" src="siho1.png" alt="画像">
</div>
<script>
const container = document.getElementById('container');
const image = document.getElementById('image');
image.addEventListener('click', function(event) {
// クリックされた位置を取得
const clickX = event.offsetX;
const clickY = event.offsetY;
// ピン要素を作成
const pin = document.createElement('div');
pin.className = 'pin';
// ピンのスタイルを調整
pin.style.left = `${clickX}px`;
pin.style.top = `${clickY}px`;
// ピンを画像に重ねて追加
container.appendChild(pin);
});
</script>
</body>
</html>
