《HTML图像的热区链接知识及实例代码》由会员分享，可在线阅读，更多相关《HTML图像的热区链接知识及实例代码（6页珍藏版）》请在金锄头文库上搜索。
1、HTML 图像的热区链接知识及实例代码除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫做热区，每个区域可设置不同的超链接。此时，包含热区的图像可以称为映射图像。要进行热区设置，首先需要在图像文件中设置映射图像名，格式为：也就是说，此时需要使用标记的 usemap 属性，定义图像的映射图像名。然后，就要在图像中定义各个热区以及超链接了，主要语法为：在该语法中又引入了两个标记：和。、标记用于包含多个标记，其中的映射图像名称就是在标记中定义的名称。标记则用于定义各个热区和超链接，它有两个重要属性：（1）shape 属性：用来定义热区形状，它有三个值：default：默认值，为整幅图像。r
2、ect：矩形区域。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,
3、 y2, xn, yn。可以是逆时针，也可以是顺时针。HTML 会按照定义顶点的顺序将它们链接起来，形成多边形热区。如果要定义的热区形状复杂，都可以用多边形热区来逼近，所以如果 shape = poly，则 coords 可能包含很多坐标值，其数量必须是偶数。图像的左上角坐标是（0, 0），x 轴向右、y 轴向下为正。【例 7】修改例 6，改为 chap7_7.html，给图像定义热区并加超链接。itsway - 图像在图中请注意，当鼠标移到热点区域时，鼠标会变成手的形状，此时单击鼠标，就会打开相应的网页。“鼋头渚”念“原头煮”，是无锡太湖的一处名胜，呵呵。在 chap7_7.html 中链接
4、了几个网页，它们可以简单写写。例如，chap7_7meiyuan.html 代码如下。itsway - 图像无锡梅园横山风景区南临太湖，北倚龙山，成为集自然景观、人文古迹、名花异卉、园林建筑及休闲健身于一体的著名旅游胜地。四面有山皆入画，一年无日不看花。chap7_7yuantouzhu.html 代码如下： itsway - 图像鼋头渚是无锡第一胜景、太湖佳绝处，独占太湖风景最美一角，山清水秀。郭沫若吟道：太湖佳绝处，毕竟在鼋头。鼋头渚的特点是以太湖风景为主，人工修饰为辅，依山傍湖，别具情趣，是观赏太湖的理想所在。chap7_7piaomiaofeng.html 代码如下：itsway -
5、图像太湖西山缥缈峰，海拔 337 米，为太湖七十二峰之首，水的精华所在。太湖风云多变，山峰常隐于云雾之中，缥缥缈缈，似仙山隔云海，如霞岭玉带连，有缥缈晴峦景观，为西山八大胜景之一。html 图像地图详细讲解 图像标签标签属性：src=图像数据alt 图像说明(鼠标悬浮）align 对齐方式(align= )border 图像边框宽度width 与 height 图像的宽度和高度（如果没有标出数值则按原始大小显示）标签的显示过程分析：一个静态 WEB 服务器是如何借 标签来收集其他 WEB 站点的计数器（图片）的呢？如：水平线标签属性：size:水平线粗细color:水平线颜色width:水平线
6、横宽noshade:水平线阴影效果1：图像超链接格式为：2:什么是图像地图把一幅图像分成多个区域，每个区域指向不同的 URL 地址，比如，将一幅中国地图的图像按省市划分成若干区域，这些区域被称为热点，单击热点区域，就可以链接到与相应省市有关的页面，这就是图像地图.3:怎样产生图像地图?(1) 首先必须定义出图像上的各个热点区域的形状,位置坐标,及其指向地 url 地址等信息, 这个过程叫图像热点映射,图像热点映射需要使用标签对进行说明,其中的 name 属性为该图像热点映射指定了一个名称.(2) 图像热点映射中的各个区域用标签说明,标签的格式为:.href 部分也可以用 nohref 替换,表
7、示在该区域单击鼠标无效.标签还可以有一格 Target 属性,用来指明浏览器在那个窗口或贞中显示 href属性所指向的网页资源.(3)在定义好了图像热点映射后，接着就要在图像标签中增加一个名为 usemap 的属性设置,usmap 属性指定该图像被用作图像地图,其设置值为所使用的图像热点映射名称 ,格式为:在 标签的属性设置值前多加一个# 字符. 例如:-例子:定义图像地图的过程:-图像地图热点区域形状(shape) 举例:shqpe 属性的设置说明:rect 定义一个矩形区域,coords 属性设置值为矩形的左上角, 右下角的坐标,各个坐标值之间用逗号分开;poly 定义一个多边形区域, coords 属性设置值为多边形各项顶点的坐标值;circle 定义一格圆形区域 , coords 属性设置值为圆心坐标及半径, 前两个参数分别为圆心的横,纵坐标,第三个参数为半径.
