<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像にピンを立てる</title>
<style>
.map-container {
position: relative;
display: inline-block;
}
.map-container img {
max-width: 100%;
height: auto;
display: block;
}
.pin {
position: absolute;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
transform: translate(-50%, -100%);
cursor: pointer;
}
</style>
</head>
<body>
<h1>画像にピンを立てよう</h1>
<div class="map-container" id="map">
<img src="images/snacktitle.png" alt="地図画像">
</div>
<script>
const map = document.getElementById('map');
map.addEventListener('click', function(event) {
const rect = map.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const pin = document.createElement('div');
pin.className = 'pin';
pin.style.left = x + 'px';
pin.style.top = y + 'px';
map.appendChild(pin);
});
</script>
</body>
</html>
