html在图片上绘制超链接

开始先给图片加个a标签，点任意位置先看效果图：

此时点击任意位置打开新标签页：

此时开始绘制：

我们在为图片绘制小块儿超链接时会用到<map>属性

1. 先给map加入name属性设置为"king"。在img中加入usemap值为#+"king"

2.shape有三种：circle圆形、rect矩形、poly多边形绘制

3.coords：坐标

此时我们设置形状为circle，坐标为459，272，96.  href属性加入路飞的搜索网址

注：后面会给大家介绍坐标的测量方式。

此时坐标测量位置的圆形为路飞的头部，点击这一块区域看效果图：

成功跳转到了其他页面，但此时点击其他位置依然是航海王的页面。圆形定位超链接就完成了。

矩形、与多边形也是同理，只需把shape的属性值更改，加入坐标即可。

测量坐标方法：

这边我用的是微信的截图方式测量position（wing10电脑的话，打开 “屏幕分辨率” 调整分辨率为100%，不然测量会有误差）

①   坐标轴在图片的左上，左上角的点为圆心，往右为X轴，往下为Y轴。

圆形的三个值分别为X坐标，Y坐标，半径

从左上角拉到路飞的头部中心（圆心位置）看pos（position位置）X为456，Y为289.

第三个值半径：

此时鼠标点击刚刚测量的圆心往上拉，看Y轴的坐标（Y轴坐标即高度）为88（此时pos不是圆半径的XY值，因为此时鼠标点击处不在图片的XY轴圆心，偏离了位置）

此时填入测量的三个值即可。

图形对应属性:

            circle圆形  给定圆心坐标(X,Y)与半径，三个值。

            rect矩形.  给定左上角与右下角坐标  ,  四个值。

            poly多边形绘制  从左上角开始顺时针给定每个点的坐标。若是矩形则是8个值，