html map 地图热点

Markingking

已于 2022-06-13 16:48:58 修改

阅读量769

点赞数 5

文章标签： linq p2p webview

于 2022-06-13 16:38:22 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_69964155/article/details/125262661

版权

本文详细介绍了HTML中的<img>标签与<map>标签配合使用创建地图热点的方法。通过area标签定义不同形状（圆形、矩形、多边形）的热点区域，并设置链接，实现点击图像上的特定区域进行跳转。重点强调了usemap属性的用法以及如何测量并设定coords坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

详细代码介绍:

<img src="" alt="" usemap="#test">

<map name="test" id="test">

<!--circle:圆形，r:圆形半径--!>

<area shape="circle" coords="x,y,r" href="" alt="">

<!--rect:矩形，x1,y1:矩形一个角的坐标，x2,y2：对角的坐标--!>

<area shape="rect" coords="x1,y1,x2,y2" href="" alt="">

<!--poly:多边形形--!>

<area shape="poly" coords="x1,y1,x2,y2,~Xn,Yn" href="" alt="">

</map>

area元素永远嵌套在map元素的内部。area元素可定义图像映射中的区域

<img>中的usemap属性可引用<map>中的id或name属性（取决于浏览器），

所以我们应同时向<map>添加id和name属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>&

最低0.47元/天解锁文章

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。