Study 2 —— 图片热点区域
2017-12-04 10:28
302 查看
标记<map>和<area>
<img src="图片" usemap="#名称">
<map id="#名称">
<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>
语法格式:
(1)插入图片,增加图片属性usemap,说明该图像是热区映射图像,属性值必须以“#”开头,如#img.
那么上面的代码就应该为<img src="图片地址" usemap="#img">
(2)<map>标记只有一个属性id,其作用是为区域命名,属性值必须与<img>标记的usemap属性值相同。
修改上述代码为:<map id="#img">
(3)<area>标记主要是定义热点区域的形状及超链接,它有三个相应的属性:
1.shape属性,控件划分区域的形状,其取值有3个,分别是rect(矩形),circle(圆形)和poly(多边形)
2.coords属性,控制区域的划分坐标:
a.如果shape属性取值为rect,那么coords的设置值分别为矩形的左上角x、y坐标点和右下角x、y坐标点,单位为像素
b.如果shape属性取值为circle,那么coords的设置值分别为圆形圆心x、y坐标点和半径值,单位为像素
c.如果shape属性取值为poly,那么coords的设置值分别为多边形各个点的x、y坐标点,单位为像素
3.href属性是为区域设置超链接的目标,设置值为“#”时,表示为空链接
相关文章推荐
- 图片(地图)热点区域高亮显示研究
- dreamweaver随记-----图片热点区域连接
- 定义图像映射中的区域(给图片热点区域加链接,常用于地图)
- 图片(地图)热点区域高亮显示研究
- 图片热点区域的简单应用
- 指定图片某块区域加超链接 (热点)
- 点击图片特定区域实现图片动态切换(图片热点、谷歌手形切换)
- mapper--图片热点区域高亮组件
- 创建图片的热点区域
- 图片热点区域使用实例
- 分割图片上的热点区域
- mapper--图片热点区域高亮组件官方站点
- 图片的热点区域
- mapper--图片热点区域高亮组件官方站点
- 截取指定区域的并保存图片
- 3-综合案例:月福首页-多媒体-图片热点-框架
- Opencv 截取图片中一部分的方法(包括任意区域)
- UE4 设置Button触控区域为图片形状
- 实现点击图片不同区域响应不同的事件
- 有其它方法在对话框背景图片 指定区域添加鼠标单击响应事件