HTML5创建热点区域

最新推荐文章于 2023-05-17 15:45:55 发布

scu_ding1

最新推荐文章于 2023-05-17 15:45:55 发布

阅读量5.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： web学习文章标签： html5 热点区域

本文链接：https://blog.youkuaiyun.com/weixin_42169849/article/details/84146926

web学习专栏收录该内容

3 篇文章

订阅专栏

创建热点区域（比如单击一张图片不同区域时，会显示不同的链接内容，这就是图片的热点区域）所谓图片的热点区域，就是将一个图片划分为若干个链接区域，当访问者单击不同的区域，会链接到不同的页面
在HTML5中，可以为图片创建3种类型的热点区域：矩形，圆形和多边形，创建热点区域用<map> and <area>标记
语法格式如下：

   <!DOCTYPE html>
    <html>
    <head>
    <title>这是一个热点区域</title>
    </head>
    <body>
    <img src="images/01.jpg" width="596" height="275" border="5" usemap="#Map">
    <map name="Map">
    <area shape="rect" coords="10,10,100,100" href="#">
    <area shape="circle" coords="120,120,50" href="#">
    <area shape="poly" coords="78,13,81,14,53,32,86,38" href="#">
    </map>
    </body>
    <!--数字表示坐标-->

说明：

图片必须增加usemap属性，说明该图像是热区的映射图像，属性值必须“#”开头，加上名字
<map>标记只有一个属性name，作用是为区域命名，其设置值必须与<img>属性值相同
<area>标记主要是定义热点区域的形状及超链接，它有三个必需的属性
shape：控制划分区域的形状，取值3个：rect，circle，poly
coords：控制区域的划分坐标，单位为像素。shape取值为rect，那么coords设置值分别为矩形左上角x，y坐标点和右下角x，y坐标点；shape取值circle，coords的值：圆形圆心x，y的坐标点和半径值；shape取值poly，coords的值：矩形各个点x，y的坐标。
href：设置区域的超链接目标，取值“#”表示空链接