Map标签
map热区需要配合img标签使用，只有img标签有usemap属性。
usemap指定某个id的map，map标签内指定多个area，area需要指定形状和坐标，跳转的url，也可以指定onclick、onmousemove等事件。
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>
DEMO
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <script type="application/javascript" src="../js/jquery-3.4.1.min.js"></script> <style type="text/css"> *{ margin: 0 0; padding: 0 0; } </style> <script type="application/javascript"> //改变背景图片 function chgImg() { $("#indexImg").css('background-image',"url('../img/1_2.jpg')"); } //切回背景图片 function normalImg() { $("#indexImg").css('background-image',"url('../img/1_1.jpg')"); } //浏览器打开指定url function openurl() { window.open("./agencyIndex.html"); } </script> </head> <body style="overflow-x:hidden"> <img style=" 1920px; height: 1420px; position: absolute; left: 50%; top: 0%; margin-left: -960px; margin-top: 0px; background-image: url('../img/1_1.jpg'); background-repeat: no-repeat; background-position: center;" usemap="#planetmap" id="indexImg"/> <map name="planetmap" id="planetmap"> <area shape="rect" coords="1050,131,1130,154" onmousemove="chgImg()" alt="机构1" /> <area shape="rect" coords="1020,120,1220,415" onclick="openurl()" onmouseout="normalImg()" alt="机构2" /> <area shape="rect" coords="770,675,1184,968" href="newsdetail.html" alt="详情"> </map> </body> </html>