level 3
风间琉璃丶🍭
楼主
在没有网络的情况下，电脑上实现点击平面示意图上的某一区域后跳转显示指定图片并具有返回初始界面的功能
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片热区示例</title> <style> .hotspot { position: absolute; background-color: rgba(255, 0, 0, 0.3); cursor: pointer; display: none; } #back-button { margin-top: 10px; display: none; } </style></head><body> <!-- 主图片 --> < img id="main-image" src="main.jpg" alt="主图片" usemap="#imagemap"> <!-- 图片映射（点击区域） --> <map name="imagemap"> <area shape="rect" coords="50,50,150,150" data-target="image1.jpg" alt="区域1"> <area shape="rect" coords="200,50,300,150" data-target="image2.jpg" alt="区域2"> </map>
<!-- 返回按钮 --> <button id="back-button">返回主界面</button>
<!-- 可视化热点区域（调试用） --> <div id="hotspot1" class="hotspot" style="width:100px; height:100px; left:50px; top:50px;"></div> <div id="hotspot2" class="hotspot" style="width:100px; height:100px; left:200px; top:50px;"></div>
<script> document.addEventListener('DOMContentLoaded', function() { const mainImage = document.getElementById('main-image'); const backButton = document.getElementById('back-button'); const areas = document.querySelectorAll('area'); const hotspots = document.querySelectorAll('.hotspot');
// 点击区域切换图片 areas.forEach((area, index) => { area.addEventListener('click', function(e) { e.preventDefault(); const targetImage = this.getAttribute('data-target'); 网页链接= targetImage; 网页链接= 'inline-block'; hotspots.forEach(spot => 网页链接= 'none'); });
// 调试：鼠标悬停显示热点区域 area.addEventListener('mouseover', () => { hotspots[lbk]index[rbk].网页链接= 'block';
2025年08月18日 00点08分
1
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片热区示例</title> <style> .hotspot { position: absolute; background-color: rgba(255, 0, 0, 0.3); cursor: pointer; display: none; } #back-button { margin-top: 10px; display: none; } </style></head><body> <!-- 主图片 --> < img id="main-image" src="main.jpg" alt="主图片" usemap="#imagemap"> <!-- 图片映射（点击区域） --> <map name="imagemap"> <area shape="rect" coords="50,50,150,150" data-target="image1.jpg" alt="区域1"> <area shape="rect" coords="200,50,300,150" data-target="image2.jpg" alt="区域2"> </map>
<!-- 返回按钮 --> <button id="back-button">返回主界面</button>
<!-- 可视化热点区域（调试用） --> <div id="hotspot1" class="hotspot" style="width:100px; height:100px; left:50px; top:50px;"></div> <div id="hotspot2" class="hotspot" style="width:100px; height:100px; left:200px; top:50px;"></div>
<script> document.addEventListener('DOMContentLoaded', function() { const mainImage = document.getElementById('main-image'); const backButton = document.getElementById('back-button'); const areas = document.querySelectorAll('area'); const hotspots = document.querySelectorAll('.hotspot');
// 点击区域切换图片 areas.forEach((area, index) => { area.addEventListener('click', function(e) { e.preventDefault(); const targetImage = this.getAttribute('data-target'); 网页链接= targetImage; 网页链接= 'inline-block'; hotspots.forEach(spot => 网页链接= 'none'); });
// 调试：鼠标悬停显示热点区域 area.addEventListener('mouseover', () => { hotspots[lbk]index[rbk].网页链接= 'block';
