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

发布时间：2023-01-17 09:32:54 来源：网络

.

江南的古屋主要以青砖为材料，砖与砖的缝隙里挤挤挨挨地塞满了苔藓与野草，几根木制的横梁点缀其间。

map标签

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

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

示例

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

首先用 ps 得到几个坐标：

然后代码实现：

CSS Code复制内容到剪贴板

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<imgsrc="cat.jpg"alt=""usemap="#catmap">
<mapname="catmap">
<areashape="rect"coords="0,0,148,139"rel="nofollow noopener noreferrer" href="http://www.baidu.com"target="_blank"alt="">
<areashape="rect"coords="148,139,295,0"rel="nofollow noopener noreferrer" href="http://www.sina.com"target="_blank"alt="">
<areashape="rect"coords="295,0,439,140"rel="nofollow noopener noreferrer" href="http://www.qq.com"target="_blank"alt="">
<areashape="rect"coords="148,139,0,340"rel="nofollow noopener noreferrer" href="http://www.163.com"target="_blank"alt="">
<areashape="rect"coords="148,139,296,340"rel="nofollow noopener noreferrer" href="http://www.soso.com"target="_blank"alt="">
<areashape="rect"coords="296,340,439,140"rel="nofollow noopener noreferrer" href="http://sf.gg"target="_blank"alt="">
<areashape="rect"coords="0,340,148,493"rel="nofollow noopener noreferrer" href="http://www.zhihu.com"target="_blank"alt="">
<areashape="rect"coords="148,493,296,340"rel="nofollow noopener noreferrer" href="http://z.cn"target="_blank"alt="">
<areashape="rect"coords="296,340,436,490"rel="nofollow noopener noreferrer" href="http://jd.com"target="_blank"alt="">
</map>
</body>
</html>