简介:
:用于定义一个客户端图像映射。图像映射(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 属性值一样,用于把它们两个"搞“在一起。
结果:
浏览器解析结果