怎么用CSS中的map标签制作单图多区域点击

这篇文章主要讲解了“怎么用CSS中的map标签制作单图多区域点击”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS中的map标签制作单图多区域点击”吧！

10多年的改则网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整改则建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“改则网站设计”,“改则网站推广”以来，每个客户项目都认真落实执行。

map标签

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

    area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
    img标签中的usemap属性可引用的map标签中的id或name属性（取决于浏览器），所以我们应同时向map标签添加id和name属性。

示例

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

首先用 ps 得到几个坐标：

然后代码实现：

CSS Code复制内容到剪贴板

1.   

2.   

3.   

4.        

5.        

6.   

7.   

8.        

9.        

10.            

11.            

12.            

13.            

14.            

15.            

16.            

17.            

18.            

19.        

20.   

21.   

就是这样。
关于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" 是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。（就是说，知道对角的两个点的坐标就行了。）

感谢各位的阅读，以上就是“怎么用CSS中的map标签制作单图多区域点击”的内容了，经过本文的学习后，相信大家对怎么用CSS中的map标签制作单图多区域点击这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！