html上导入云南地图,并设置结点,点击结点跳转到相应页面的代码
时间: 2024-04-18 22:31:52 浏览: 19
下面是一个示例代码,演示如何在 HTML 上导入云南地图并设置结点,使其在点击时跳转到相应页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>云南地图</title>
<style>
#map {
position: relative;
width: 800px;
height: 600px;
}
.node {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div id="map">
<img src="path/to/your/map-image.jpg" alt="云南地图">
<div class="node" id="node1" style="top: 100px; left: 200px;"></div>
<div class="node" id="node2" style="top: 300px; left: 400px;"></div>
</div>
<script>
var node1 = document.getElementById("node1");
var node2 = document.getElementById("node2");
node1.addEventListener("click", function() {
window.location.href = "page1.html"; // 跳转到 page1.html 页面
});
node2.addEventListener("click", function() {
window.location.href = "page2.html"; // 跳转到 page2.html 页面
});
</script>
</body>
</html>
```
请注意,上述代码中的路径`path/to/your/map-image.jpg`需要替换为你实际保存地图图像的路径。同样,你也需要根据实际需求修改结点的位置和跳转链接。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)