HTML图像的热区链接知识及实例代码参考.pdfVIP

HTML图像的热区链接知识及实例代码 除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫做 热区 ，每个 区域可设置不同的超链接。此时，包含热区的图像可以称为映射图像。 要进行热区设置，首先需要在图像文件中设置映射图像名，格式为： img src = 图像文件地址 usemap = 映射图像名称 也就是说，此时需要使用 img标记的 usemap 属性，定义图像的映射图像名。 然后，就要在图像中定义各个热区以及超链接了，主要语法为： map name = 映射图像名称 area shape = 热区形状 1 coords = 热区坐标 1 href = 链接地址 1 area shape = 热区形状 2 coords = 热区坐标 2 href = 链接地址 2 ,, area shape = 热区形状 n coords = 热区坐标 n href = 链接地址 n /map 在该语法中又引入了两个标记： map和 area 。 map、 /map标记用于包含多个 area 标记，其中的 映射图像名称 就是在 img标记中定义的名称。 area 标记则用于定 义各个热区和超链接，它有两个重要属性： （1）shape 属性：用来定义热区形状，它有三个值： ● default ：默认值，为整幅图像。 ● rect ：矩形区域。 ● circle ：圆形区域。 ● poly ：多边形区域。 （2 ）coords 属性：用来定义矩形、圆形或多边形区域的坐标。它的格式如下： ● 如果 shape = rect ，则 coords 包含四个参数，分别为 left 、top 、right 和 bottom ， 也可以将这四个参数看成矩形左上角和右下角顶点的坐标。 ● 如果 shape = circle ，则 coords 包含三个参数， 分别为 center-x 、center-y 和 radius ， 这三个参数是圆心坐标和圆的半径。 ● 如果 shape = poly ，则 coords 需要按顺序取多边形各个顶点的（ x 、y ）坐标值，因 此形式为 x1, y1, x2, y2, ,, xn, yn 。可以是逆时针，也可以是顺时针。 HTML会按照 定义顶点的顺序将它们链接起来，形成多边形热区。 如果要定义的热区形状复杂，都可以用多边形热区来逼近，所以如果 shape = poly ， 则 coords 可能包含很多坐标值，其数量必须是偶数。 图像的左上角坐标是（ 0, 0 ）， x 轴向右、 y 轴向下为正。 【例7】修改例 6，改为 chap7_7.html ，给图像定义热区并加超链接。 html head titleitsway -- 图像 /title /head body centerimg src = taihu.gif usemap = taihu border = 0center map name = taihu area shape=rect coords=223,20,241,38 href=chap7_7meiyuan.html target=_blank alt= 梅园 area shape=circle coords=234,53,7 href=chap7_7yuantouzhu.html target=_blank alt= 鼋头渚 area shape=poly coords = 226, 228, 243, 219, 256, 207, 271, 217, 275, 225, 265, 229, 265, 232, 255, 250, 244, 253, 227, 239 href=chap7_7piaomiaofeng.html target=_blank alt= 缥缈