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>
<title>itsway -- 图像</title>
</head>
<body>
<center><img src = "taihu.gif" usemap = "taihu" border = "0"><center>
<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>
<title>itsway -- 图像</title>
</head>
<body>
<p> 无锡梅园横山风景区南临太湖，北倚龙山，成为集自然景观、人文古迹、名花异卉、园林建筑及休闲健身于一体的著名旅游胜地。"四面有山皆入画，一年无日不看花"。</p>  </body>
</html>
chap7_7yuantouzhu.html代码如下：
<html>
<head>
<title>itsway -- 图像</title>
</head>
<body>
<p>  鼋头渚是无锡第一胜景、太湖佳绝处，独占太湖风景最美一角，山清水秀。郭沫若吟道："太湖佳绝处，毕竟在鼋头"。鼋头渚的特点是以太湖风景为主，人工修饰为辅，依山傍湖，别具情趣，是观赏太湖的理想所在。</p>
</body>
</html>
chap7_7piaomiaofeng.html代码如下：
<html>
<head>
<title>itsway -- 图像</title>
</head>
<body>
<p>  太湖西山缥缈峰，海拔337米，为太湖七十二峰之首，水的精华所在。太湖风云多变，山峰常隐于云雾之中，缥缥缈缈，似仙山隔云海，如霞岭玉带连，有"缥缈晴峦"景观，为西山八大胜景之一。</p>
</body>
</html>
html图像地图详细讲解
图像标签
<img></img>标签
属性：
src="图像数据"
alt图像说明(鼠标悬浮）
align对齐方式(align=  )
border图像边框宽度
width与height图像的宽度和高度（如果没有标出数值则按原始大小显示）
<img>标签的显示过程
分析：一个静态WEB服务器是如何借<img>标签来收集其他WEB站点的计数器（图片）的呢？
如：
<img src=www.zdp2008/count.jsp>
<hr>水平线标签
属性：
size：水平线粗细
color：水平线颜
width：水平线横宽
noshade：水平线阴影效果
1：图像超链接
格式为：<a href="url"><img src="url"></a>
2：什么是图像地图
把一幅图像分成多个区域，每个区域指向不同的URL地址，比如，将一幅中国地图的图像按省市划分成若干区域，这些区域被称为热点，单击热点区域，就可以链接到与相应省市有关的页面，这就是图像地图.
3：怎样产生图像地图?
(1) 首先必须定义出图像上的各个热点区域的形状，位置坐标，及其指向地url地址等信息，这个过程叫图像热点映射，图像热点映射需要使用<mapname=mapname></map>标签对进行说明，其中的name属性为该图像热点映射指定了一个名称.
(2) 图像热点映射中的各个区域用<area>标签说明,<area>标签的格式为:<area shqpe="形状" coords="坐标" href="url">.href部分也可以用nohref替换，表示在该区域单击鼠标无效.<area>标签还可以有一格Target属性，用来指明浏览器在那个窗口或贞中显示href属性所指向的网页资源.
(3)在定义好了图像热点映射后，接着就要在<img>图像标签中增加一个名为usemap的属性设置,usmap属性指定该图像被用作图像地图，其设置值为所使用的图像热点映射名称，格式为：在<map>标签的<name>属性设置值前多加一个#字符.例如:
<img src="china.jpg" usemap="#mymap">
-------------------------------------
例子:
定义图像地图的过程:
<!--定义一个图像他的边框为0(border)  usemap(指定该图像被用作图像地图)
"#mymap"(所使用的图像热点映射名称)-->
<img src="logo.gif" border=0 usemap="#mymap">
<!--定义热点映射--->
<map name=mymap>
<!---定义第一个热点区域---->
<!--shape(定义热点区域形状) "rect"(矩形) coords(设定坐标) "0,0,(矩形左上角位置坐标)50,50,"(右下角位置坐标) href(设定超链接指向) "a.html"(超链接指向值)-->
<area shape="rect" coords="0,0,50,50" href="a.html">
<!--定义第二个热点区域-->
<area shape="rect" coords="50,0,100,50" href="b.html">
html矩形框代码怎么写<!---定义第三个热点区域-->
<area shape="rect" coords="100,0,150,50" href="c.html">
</map>
----------------------
图像地图热点区域形状(shape)举例:
<img src="logo.gif" border=0 usemap="#mymap">
<map name=mymap>
<area shape="rect" coords="140,20,280,60" href="a.html">
<area shape="poly" coords="100,100,180,180,200,140" href="b.html">
<area shape="circie" coords="80,100,60" href="c.html">
</map>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。