HTML
2018-08-14 本文已影响0人
MangfuStudio
简介：
<map>：用于定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。
<area>：定义<map>的可点击区域
当<map>设置name或者id属性时，<img>标签的usemap属性会根据<map>的id和name属性来关联<map>
属性：
<area>属性:
|
|- 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文件在同一目录中)，我将定义两个矩形地点解区域。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<mate charset="utf-8">
</head>
<body>
<img src="1.jpg" width="600px" height="350px" usemap="img-map-test" border="0">
<map name="img-map-test" id="img-map-test">
<area alt="1-1.jpg无法加载" shape="rect" coords="0,0,300,350" href="1-1.jpg">
<area alt="1-2.jpg无法加载" shape="rect" coords="300,0,600,350" href="1-2.jpg">
</map>
</body>
</html>
源码解析：<img>显示图片，width图片宽度600px，height图片高度350px，(高度与宽度无所谓,反正是测试)，border设置边框为零，usemap的值与下面的<map>的 id、name 属性值一样，用于把它们两个"搞“在一起。
结果:
浏览器解析结果
