7-2 标示文件标题<figure>和<figcaption>元素

<figure>元素主要是标示文件内容所参照的图像、图表、照片或程序代码，同时这些内容可随时从文件中抽离。<figcaption>元素主要是列出文件内容的名称，在本章可以理解成是图片名称，这个元素只能在<figure>元素开头或尾端使用一次。不过这两个元素由其元素名称判断，一般最常用的仍是标示图像。

程序实例ch7_3.html：为文件内容（本例是图像）加上标题名称。

执行结果

程序实例ch7_4.html：用<figure>和<figcaption>标示表格。

执行结果

7-3 制作响应图

响应图可以分为客户端（Client site）和服务器端（Server site）两类。这两类响应图的差别在于，将鼠标指针指向图中的热点时，若是客户端的响应图，则启动浏览器的超链接；若是服务器端的响应图，则由服务器启动超链接。客户端的响应图，由于不会增加服务器的负担以及系统流量上的负荷，一般较常使用。

响应图可以当作一般网页的导航功能，例如，可以将网站所有功能制作成响应图，放在网页某一位置，方便用户参考。

7-3-1 建立地图<img>

若想设计响应图，首先需定义一个地图的图片。我们可以将此地图想成未来要使用的响应图，当然我们必须为此图片命名。以上工作可以使用<img>元素完成，但必须加上usemap属性，这个属性的功能是给未来要成为响应图的图片命名。若是我们想将一张地图asiamap.jpg设定为未来使用的响应图，同时响应图的名称是MyMap，则<img>的写法如下：

    <img src="asiamap.jpg"usemap=
"#MyMap">

基本上usemap属性所定义的就是未来程序须使用的响应图名称，在设定时需加上“#”符号，但是未来使用时则不须加上此符号。

7-3-2 响应图<map>

该功能主要是将<img>所定义的图片链接至响应图。如果采用先前的实例，将MyMap链接至响应图，使用<map>的写法如下：

7-3-3 定义响应图的链接区域<area>

使用<area>定义响应图的链接区域，需使用几个重要的属性，分别是shape、coords、href和alt，下面将分别说明。

□ shape

shape的取值有下列4种。

rect：代表链接区域是四边形。

circle：代表链接区域是圆形。

poly：代表链接区域是多边形。

default：一般是用在链接区以外，不执行任何动作，程序设计时也可省略。

□ coords

coords主要是定义链接的坐标，这个坐标又会因shape的值而有不同定义。坐标在定义时以px为单位，左上角是（0,0），向右延伸为x轴，越往右px值越；向下延伸为y轴，越往下px值越大。shape在不同状况时coords的使用说明如下：

rect：需要4个值，分别是左上角x坐标，y坐标；右下角x坐标，y坐标。

circle：需要3个值，分别是中心点的x坐标，y坐标和半径。

poly：至少需要6个值，如果是3角形需要6个值，4边形需要8个值，依此类推。所有链接区域的端点以顺时针方向列出，先列出第一个点的x坐标和y坐标，再列出第二个点的x坐标和y坐标，其他依此类推。

default：如果是default，则不用指定坐标值。

□ href

href用于设定所链接的文件或是URL。

注 本节地图素材请读者自行准备，地图文件名改成代码中的文件名即可。

程序实例ch7_5.html：设计响应图。本程序在执行时会出现一个亚洲地图，在这地图中含有3个超链接，当将鼠标指针指向超链接区域时，窗口左下方会列出超链接的地址。如果指向超链接区域时按住鼠标左键，可以看到虚线框，这个框就是超链接区域。正式执行超链接时，将执行指定的超链接html文件。

soviet.html

mchina.html

ocean.html

执行结果 将鼠标指针移至“中国”区超链接出现圆圈。

如果按住鼠标左键不放，将看到“中国”区超链接的范围（虚线圆）。

若是单击，可以启动超链接，此程序实例的结果如下：

在上述执行结果中，笔者故意在ch7文件夹不放相对应的中国风景图片，这将是各位读者的作业。“俄罗斯”超链接的范围是个虚线矩形。

“太平洋”区超链接的范围是个虚线四边形。

上述俄罗斯和太平洋区的超链接范围已经超出原图片，这是故意的，这项修正也将是各位读者的作业。