html map 地图热点

原创

已于 2022-06-13 16:48:58 修改 · 817 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#linq #p2p #webview

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

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

详细代码介绍:

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

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

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

</map>

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="./img/1.jpg" usemap="#car">
		<!--
		    map设置热点位置和跳转页面 
			area:区域
			   shape:形状
			      circle圆形,(x,y,r)
				  rect 矩形,定位两个对角坐标(x1,y1,x2,y2)
				  poly多边形,(x1,y1,x2,y2,x3,y3,......)
			coords: