html图片多热点怎么弄,CSS学习笔记(十五) 使用map标签实现单图多热点

map标签

定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

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

img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器)，所以我们应同时向map标签添加id和name属性。

示例

例如我们想在下面一张图实现九个热点区域，不切图，就使用map标签。

首先用 ps 得到几个坐标：

然后代码实现：

Document

就是这样。

关于area

area 可以是圆形(circ)，多边形(poly)，矩形(rect)，不同形状要选取不同的坐标(coords).

圆形：shape="circle"，coords="x,y,z"

x,y为圆心坐标(x,y)，z为圆的半径

多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

每一对x,y坐标都定义了多边形的一个顶点(0,0) 是图像左上角的坐标)。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。

矩形：shape="rectangle"，coords="x1,y1,x2,y2"

第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。(就是说，知道对角的两个点的坐标就行了。)

参考资料

html图片多热点怎么弄,CSS学习笔记(十五) 使用map标签实现单图多热点相关推荐

HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
python复制指定字符串_python3.4学习笔记(十五) 字符串操作（string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等）...
python3.4学习笔记(十五) 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) python print 不换行(在后面加上,end=''),prin ...
windows内核开发学习笔记十五：IRP结构
windows内核开发学习笔记十五:IRP结构 IRP(I/O Request Package)在windows内核中,有一种系统组件--IRP,即输入输出请求包.当上层应用程序需要访问底层输入输 ...
Polyworks脚本开发学习笔记(十五)-用Python连接Polyworks的COM组件
Polyworks脚本开发学习笔记(十五)-用Python连接Polyworks的COM组件用Polyworks脚本开发,没有高级语言的支持,功能难免单一,一些比较复杂的交互实现不了,界面和报告也很 ...
IOS之学习笔记十五(协议和委托的使用)
1.协议和委托的使用 1).协议可以看下我的这篇博客 IOS之学习笔记十四(协议的定义和实现) https://blog.csdn.net/u011068702/article/details/809 ...
Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告
请看之前的:Mr.J-- jQuery学习笔记(十四)--动画显示隐藏话不多说,直接上demo <!DOCTYPE html> <html lang="en"& ...
前端学习笔记(十五)
第十五章 HTML5新增标签一.HTML5概述 1.简介 HTML5万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言的第五次大修改.HTML5将成为 HTML.XHTML ...
世界是有生命的（通向财富自由之路学习笔记十五）
最近因为工作调度的事情,有了一段空闲的日子,有比较多的时间来回望自己走过的路以及如何走好以后的路.之前忙得很少时间来写博文,很少时间来写读书笔记,逐渐将自己一些很好的习惯丢弃了.从今天起将重拾写博文的 ...

html图片多热点怎么弄,CSS学习笔记(十五) 使用map标签实现单图多热点

html图片多热点怎么弄,CSS学习笔记(十五) 使用map标签实现单图多热点相关推荐

最新文章

热门文章