WEB前端--html map area shape（地图）图片定位（矩形）

本文以矩形为例，最快上手图片定位，其他形状（shape）类似，难点在于coords定位法则不同。
 

一、（矩形）html代码

<map name="Map">
        <area shape="rect" coords="60,300,225,365" href="examRule.jsp">
        <area shape="rect" coords="300,260,465,305" href="manage/stuResult.do?action=stuResultQueryS&ID=${student}">
        <area shape="rect" coords="490,290,670,350" href="manage/student.do?action=modifyQuery&ID=${student}">
        <area shape="rect" coords="750,260,920,330" href="logout.jsp">
</map>

如图

 

二、（矩形）map属性说明

<area shape="rect" coords="60,300,225,365" href="examRule.jsp">

参数说明

erea         表示一个区域;
shape      属性表示定位的区域形状，shape="rect"，表示长方形（rectangle）;
coords    属性表示坐标描述，coords="x1,y1,x2,y2"，(x1,y1)表示矩形的左上角顶点位置，(x2,y2)表示矩形的右下角顶点位置，2点即可确定一个矩形。
href          属性表示点击定位的区域，跳转页面url。


 

来源：CSDN

作者：六块腹肌的攻城狮

链接：https://blog.csdn.net/JustinQin/article/details/80660259