时间：2023-07-23 02:24:01 | 来源：网站运营
时间：2023-07-23 02:24:01 来源：网站运营
HTML5创建热点区域：
在线咨询
<a>标签加上链接地址就行了。这次，介绍个如何用HTML5创建热点区域。有时，我们在浏览网页的时候会发现，当我们单击一张图片的不同区域的时候会显示不同的链接内容，这就是所谓的图片热点区域。其实也就是把一个图片划分成若干个链接区域。访问者单击不同的区域会跳转到不同的目标页面。创建热点区域
用Dreamwear精确定位热点区域。
<map>和<area>，其语法格式如下：1<img src="图片地址" usemap="#名称" >2<map id="#名称">3 <area shape="rect" coords="10,10,100,100" href="#" >4 <area shape="circle" coords="120,120,50" href="#" >5 <area shape="poly" coords="78,13,81,14,53,32,86,38" href="#">6</map>在上面的语法中请注意以下几点：usemap属性，说明该图像是热点区映射图像，而且必须以#开头。<map>标记只有一个属性id，其作用是为区域命名，属性值必须与<img>标记的usemap的属性值相同。<area>标记主要定义热点区域的形状与超链接，它有三个相同的属性:1.shape属性，控制划分区域的形状，其值有3个，分别为rect（矩形）、circle（圆形）、poly（多边形）。
2.coords属性，控制区域划分的坐标。
shape属性取值为rect，那么coords的设置分别为矩形的左上角x，y坐标点和右下角x，y坐标点，单位为像素。shape属性取值为circle，那么coords的设置分别为圆形圆心的x，y坐标点和半径点值，单位为像素。shape属性取值为poly，那么coords的设置分别为多边形的各个点x，y坐标点，单位为像素。href属性是为设置超链接的目标，设置值为#时，表示空超链接。Dreamwear精确定位热点区域。Dreamwear来实现。shape属性为矩形、圆形和多边形来实现点击不同的区域跳转到相应的区域。href属性的值，就可以链接到相应的位置。1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>创建热点区域</title> 6</head> 7<body> 8<img src="04.png" alt="" width="1055" height="665" usemap="#Map" border="0"/> 9<map name="Map">10 <area shape="rect" coords="131,86,330,286" href="h2.html" target="_blank">11 <area shape="circle" coords="530,187,91" href="h3.html" target="_blank">12 <area shape="rect" coords="726,92,937,289" href="h4.html">13 <area shape="poly" coords="865,382,915,428,916,518,875,567,786,570,733,523,738,430,771,388" href="h5.html">14 <area shape="rect" coords="131,381,325,573" href="h6.html" target="_self">15 <area shape="circle" coords="523,478,92" href="h7.html" target="_self">16</map>17</body>18</html>最后还是希望各位能多去动手写写。关键词：区域,创建
