html map坐标怎么用,HTML <map>与<area>标签

简介：

：用于定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

：定义的可点击区域

当设置name或者id属性时，标签的usemap属性会根据的id和name属性来关联

属性：

属性:

|

|- alt: 当图片无法加载的时候显示的提示文字

|

|- shape: 定义可点击区域的形状，有如下值

| |- circ或circle:圆形

| |- poly或polygon:多边型

| |- rect或rectangle:矩形

|

|- coords: 定义坐标值

| |- 当shape为circ或circle(圆形)时,coords的值应该为 (x,y,r) x,y是圆心的坐标,r是半径

| |- 当shape为rect或rectangle(矩形)时,coords的值应该为 (x1,y1,x2,y2) x1,y1是矩形的左上角坐标 x2.y2是矩形的右下角坐标

| |- 当shape为poly或polygon(多边形)时,coords的值应该为 (x1,y1,x2,y2,x3,y3......) 当可点击区域为多边形时,coords的值应该为多边形各个顶点的坐标。注意:最后一个坐标应与第一个坐标一致,用于关闭多边形,就像走路,不管你怎么走,最后回到出发地点,你走过的路线才会形成一个封闭图形。

|

|- href: 定义一个URL,当点击设定的区域时访问该URL

|

|- target: 规定href在何处打开

| |- _blank: 在新窗口打开URL。

| |- _self: 在同级框架中打开URL。

| |- _parent: 在父框架中打开URL。

| |- _top: 这整个窗口中打开URL。

| |- frameName: 在指定的框架中打开URL。

开始干：

1.jpg

1-1.jpg

1-2.jpg

上面是我们要用到的三张图片，1.jpg是原图,1-1.jpg是放大后的左半部分,1-2.jpg是放大后的右半部分，现在来实现点击原图查放大图片的功能(下面的源码要求图片与html文件在同一目录中)，我将定义两个矩形地点解区域。

test

源码解析：显示图片，width图片宽度600px，height图片高度350px，(高度与宽度无所谓,反正是测试)，border设置边框为零，usemap的值与下面的的 id、name 属性值一样，用于把它们两个"搞“在一起。

结果:

浏览器解析结果