HTML图像热区链接知识与实例代码.docVIP

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=缥缈峰??? /map? /body? /html 在图中请注意，当鼠标移到热点区域时，鼠标会变成手的形状，此时单击鼠标，就会打开相应的网页。“鼋头渚”念“原头煮”，是无锡太湖的一处名胜，呵呵。　　在chap7_7.html中链接了几个网页，它们可以简单写写。例如，chap7_7meiyuan.html代码如下。 ? html? head??? titleitsway -- 图像/title? /head? body??? p 无锡梅园横山风景区南临太湖，北倚龙山，成为集自然景观、人文古迹、名花异卉、园林建筑及休闲健身于一体的著名旅游胜地。四面有山皆入画，一年无日不看花。/p? /body? /html chap7_7yuantouzhu.html代码如下： ? html? head??? titleitsway -- 图像/title? /head? body??? p? 鼋头渚是无锡第一胜景、太湖佳绝处，独占太湖风景