HTML 地图按钮示例：随机位置，无标题，点击显示名称
<!DOCTYPE html>
<html>
<head>
<style>
.map {
position: relative;
width: 600px;
height: 400px;
background-image: url('map.jpg'); /* 替换为实际的地图背景图片 */
background-size: cover;
}
<pre><code>.location {
position: absolute;
width: 30px;
height: 30px;
background-color: blue; /* 替换为实际的按钮颜色 */
border: none;
cursor: pointer;
display: none;
}
.location:hover {
background-color: red; /* 替换为实际的按钮悬停颜色 */
}
</code></pre>
</style>
</head>
<body>
<div class='map'>
<button class='location' id='park'></button>
<button class='location' id='hospital'></button>
<button class='location' id='home'></button>
<button class='location' id='company'></button>
<button class='location' id='mall'></button>
</div>
<script>
var locations = [
{ id: 'park', name: '公园' },
{ id: 'hospital', name: '医院' },
{ id: 'home', name: '家' },
{ id: 'company', name: '公司' },
{ id: 'mall', name: '商场' }
];
function getRandomPosition() {
var map = document.querySelector('.map');
var mapWidth = map.offsetWidth;
var mapHeight = map.offsetHeight;
var buttonSize = 30; // 按钮大小
var maxX = mapWidth - buttonSize;
var maxY = mapHeight - buttonSize;
var randomX = Math.floor(Math.random() * maxX);
var randomY = Math.floor(Math.random() * maxY);
return { x: randomX, y: randomY };
}
function displayLocationName(event) {
var id = event.target.id;
var location = locations.find(loc => loc.id === id);
alert(location.name);
}
window.onload = function() {
var locationButtons = document.querySelectorAll('.location');
locationButtons.forEach(button => {
var randomPosition = getRandomPosition();
button.style.left = randomPosition.x + 'px';
button.style.top = randomPosition.y + 'px';
button.style.display = 'block';
button.addEventListener('click', displayLocationName);
});
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ph8v 著作权归作者所有。请勿转载和采集!