html 锚点链接图像热区链接-白红宇

html 锚点链接图像热区链接

阅读量：6234 次

发布时间：2019-06-21

本文共 1638 字，大约阅读时间需要 5 分钟。

除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫做"热区"，每个区域可设置不同的超链接。此时，包含热区的图像可以称为映射图像。

要进行热区设置，首先需要在图像文件中设置映射图像名，格式为：

也就是说，此时需要使用<img>标记的usemap属性，定义图像的映射图像名。

　然后，就要在图像中定义各个热区以及超链接了，主要语法为：

……

</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轴向下为正。

　　【例】

<html>

<head>

<title>itsway -- 图像</title>

</head>

<body>

</map>

</body>

</html>

转载于:https://www.cnblogs.com/ginikeer/p/5466096.html

你可能感兴趣的文章