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" onfocus="blur(this);" alt="Venus" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" onfocus="blur(this);" 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="width: 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>