4个按钮是一个整张的图片,把一些小的零碎的图片写成一张大图。这样的话可以提高页面的加载速度。
代码:
src="../assets/image/111222.png"
style="width: 200px; margin-top: 20px; margin-bottom: 20px"
usemap="#batmap" />
纯html5
重点:
(1) 要先建立图片热点区域,必须先插入图片。注意,图片必须增加usemap 属性,说明图像是热点映射图像,属性值必须以 “#” 开头。
(2)
(3) 标记主要是定义热点区域的形状以及超链接,它有三个对应属性:
shape属性 空间划分区域的形状,其取值有3个,分别是rect(矩形)、circle(圆形)、poly(多边形)
coords属性 控制区域的划分坐标。
如果shape属性取值为rect,那么coords的设置值分别为矩形的左上角x,y坐标点和右下角x,y坐标点,单位为像素
如果shape属性取值为circle,那么coords的设置值分别为圆形圆心x,y坐标点和半径值,单位为像素。
如果shape属性取值为poly,那么coords的设置值分别为多边形的在各个点x,y坐标点,单位是像素。
href属性 是为区域设置超链接的目标,设置值为“#”时表示为空连接。
1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
3. 如果素材损害你的权益请联系客服vx:13230981129给予处理。