前端学习01-07图像地图

1.图像超链接

格式<a href=><img src=""></a>

2.图像地图

把一幅图像分成过个区域，每个区域指向不同的URL地址，譬如，将衣服中国地图的图像按照省市划分成若干区域，这些区域被称为热点，单击热点区域，就可以连接到与相应省市有关的页面，这就是图像地图。

客户端图像地图：

怎样产生图像地图？

首先必须定义出图像上的个热点区域的形状，位置坐标，机器指向的url地址等信息，这个过程叫图像热点映射，图像热点映射需要使用<map name=mapname></map>标签对进行说明，其中的name属性为该图像热点映射指定了一个名称。

（2）图像热点映射中各个区域用<area>标签说明，<area>标签的格式为：<area shape="形状" coords="坐标" href=“url”>.href部分也可以用nohref替换，表示在该区域单击鼠标无效，<area>标签还可以有一个target属性，用来指明浏览器在哪个窗口或帧中显示href属性所指向的网页数据。

（3）定义好了图像热点映射后，接着就要在<img>图像标签中增加一个名为usemap的属性设置，usemap属性指定该图像被用做图像地图，其设置值为所使用的图像热点映射名称，格式为：在<map>标签的name属性设置值前多加一个"#"字符。例如，<img src="china.jpg" usermap="#mymap">

<img src="timg.jpg" border=0 usemap="#mymap">
<map name=mymap>
    <area shape="rect" href="a.html" coords="0,0,150,200">
    <area shape="rect" href="b.html" coords="0,0,150,200">
    <area shape="rect" href="c.html" coords="0,0,150,200">
</map>

shape属性的设置说明：

rect定义一个矩形区域，doords属性设置值为矩形的左上角右下角的坐标，各个坐标之间用逗号隔开。

poly定义一个多边形区域，coords属性设置值为多边形各顶点的坐标值

circle定义一个圆形区域，coords属性设置值为圆心坐标以及半径，钱两个参数分别为圆心的很重坐标，第三个参数为半径。