用map和area标签制作可点击的图片热点区域
最编程
2024-02-12 21:46:44
...
在购物网站 Landing page 页,往往会存在商品宣传信息,为提升首页加载速度,往往会使用一张图片来包含所有要展示商品(① 减少http请求个数;② 减少页面DOM数)。如何在一张商品海报上,实现点击某商品,跳转到该商品详情页面?
以上,也可以使用 shape="poly"
指定不规则的热点(可点击)区域。
HTML <map>
与 <area>
一起使用来定义一个图像映射 (一个可点击的链接区域)。
<map>
必须存在 name 属性,其用于指定名字,以便被引用。
属性值不能含空格字符,且当前 Document 中不能存在同名。
如果同时指定了 id 属性,二者只必须一致。
<area>
定义一个可点击区域。
- shape:热点形状。
rect/circle/poly/default
,default定义整个区域。 - coords:详细说明 shape 坐标。
shape |
coords 示例 |
说明 |
rect |
|
左上角、右下角坐标 |
circle |
|
圆心坐标,半径 |
poly |
|
多边形每个点的坐标 如果第一个和最后一个坐标对不相同,自动闭合 |
- href:该区域的超链接目标
- target:显示资源方式
_self/_blank/_parent/_top
- referrerpolicy:指定来源网址
参考地址
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area
上一篇: HTML6教程:创建图像热点链接
下一篇: 利用HTML5创建图像热点链接的方法