（22）HTML标签详解之<img><map><area>

HTML标签详解之<img><map><area>

   在任何一个网页中图片都是很常见的，有的作为背景图片，有的是直接插入在网页中作为展示或者链接。

<img>标签的四大属性width、height、src 和 alt 。在一个图文混排的网页中，需要注意图片与周围文字的排布情况。以往都是使用align属性来设置如何根据周围的文本来排列该图像，但是建议使用float属性来控制图片与文字的排布。

        默认情况下，图片后如果紧跟着英文，则文字会在下一行显示，并且不能够自动换行。汉字则可以当前行显示并且自动换行。实现自动换行可以在外部div中使用word-break：break-all属性。

                                  此截图效果对<img>标签使用了float：left；属性。右侧文字的首行缩进，对外面的div使用了text-indent：2em; 属性。

                                                  对于"text-indent:2em;"属性，只能加在块状元素上面，内联元素是不起作用的。

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

应用<map>和<area>可以对一张图片中特定的区域设置链接，最主要的是<area>标签中的shape属性和坐标coords属性。

圆形：shape="circle"，coords="x,y,z"

这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。

多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。

多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

矩形：shape="rectangle"，coords="x1,y1,x2,y2"

第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。

如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。