网页技术交流
 
发新帖
楼主: 零五零八
查看: 792|回复: 0

[使用教程] CSS实现图像映射的方法

[复制链接]
零五零八 发表于 2021-3-22 20:32:52 | 显示全部楼层
本帖最后由 零五零八 于 2021-3-22 20:35 编辑

利用图像映射可以将图像的一些区域指定为热点。鼠标滑过该区域,可以展示一些内容信息。当然我们也可以单击该区域进行跳转,实现一个类似于图像导航的功能。

1.png

我从网上找了上边这样一张图片,想要实现以下功能:当鼠标悬停在每个人身上时,希望出现一个矩形框,单击后可以进行跳转到相应的网站。


效果如下:
2.gif

1、首先需要做的是将图像添加到页面中,放在一个已命名的div中:

  1. <div class="imagemap">
  2.   <img width="500" height="350" src="test.jpg">
  3. </div>
复制代码


2、然后,在图像后面添加每个人的网站链接的列表。需要给每个列表项分配一个类以便标识列表项中的人。还可以给每个链接设置 title 属性,其中包含这个人的名字。这样的话,当鼠标悬停在链接上时,在大多数浏览器上显示的工具提示中会显示人名。


  1. <div class="imagemap">
  2.   <img width="500" height="350" src="test.jpg">
  3.   <ul>
  4.     <li class="baidu">
  5.       <a  target="_blank">
  6.         <span class="note">百度</span>
  7.       </a>
  8.     </li>
  9.     <li class="tengxun">
  10.       <a  target="_blank">
  11.         <span class="note">腾讯</span>
  12.       </a>
  13.     </li>
  14.     <li class="xinlang">
  15.       <a  target="_blank">
  16.         <span class="note">新浪</span>
  17.       </a>
  18.     </li>
  19.     <li class="taobao">
  20.       <a  target="_blank">
  21.         <span class="note">淘宝</span>
  22.       </a>
  23.     </li>
  24.     <li class="jd">
  25.       <a  target="_blank">
  26.         <span class="note">京东</span>
  27.       </a>
  28.     </li>
  29.   </ul>
  30. </div>
复制代码

我这里想要对鼠标悬停时显示的内容样式进行自定义,没有使用 title 属性,所以在 a 标签中加了一个 span


3、设置外层div的宽度和高度,让它和图像的大小保持一致。然后,将div的position属性设置为relative,因为这样就可以让包含的链接可以相对于div(也就是图像)的边缘进行绝对定位。
不希望页面上显示列表的黑圆点,另外也想去除列表项的内外边距。


  1. .imagemap {
  2.   width: 500px;
  3.   height: 350px;
  4.   position: relative;
  5. }

  6. .imagemap ul {
  7.   margin: 0;
  8.   padding: 0;
  9.   list-style: none;
  10. }
复制代码

4、下一件事情是对链接应用样式。对链接进行绝对定位(因为我们已经在外层的div上设置了position属性为relative,所以此处是相对于div进行定位的,而div和图片的宽高是一样的,也就相当于我们是从图片的左上角开始定位),将它们分别定位到相应的人身上,形成热点。但是,首先需要设置它们的宽度和高度,从而创建需要的单击区域


  1. .imagemap a {
  2.   position: absolute;
  3.   /*转为块级元素,这样可以形成一块区域*/
  4.   display: block;
  5.   width: 50px;
  6.   height: 60px;
  7.   text-decoration: none;
  8. }

  9. .imagemap .baidu a {
  10.   top: 70px;
  11.   left: 65px;
  12. }

  13. .imagemap .tengxun a {
  14.   top: 85px;
  15.   left: 150px;
  16. }

  17. .imagemap .xinlang a {
  18.   top: 70px;
  19.   left: 230px;
  20. }

  21. .imagemap .taobao a {
  22.   top: 70px;
  23.   left: 305px;
  24. }

  25. .imagemap .jd a {
  26.   top: 70px;
  27.   left: 365px;
  28. }

  29. /*鼠标滑过的时候,显示一个方框*/
  30. .imagemap a:hover {
  31.   border: 1px solid white;
  32. }
复制代码

5、接下来我们需要设置当鼠标滑过的时候,显示的文本内容的样式。我们希望它出现在人物的上方,有一个背景颜色和内边距等样式,文本居中:


  1. .imagemap a .note {
  2.   position: absolute;
  3.   top: -2em;
  4.   left: -100em;
  5.   background-color: #42b983;
  6.   color: white;
  7.   width: 2em;
  8.   text-align: center;
  9.   padding: 0.2em 0.5em;
  10.   border-radius: 5px;
  11. }

  12. .imagemap a:hover .note {
  13.   left: 0;
  14. }
复制代码

注意:
  • 当position属性取值为absolute绝对定位时,元素会被移出正常文档流,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。 因为列表中的链接a标签,我们已经让它绝对定位了,所以a标签中的span是相对于链接a进行定位的。
  • 这里设置top为负值是让元素向上移动一段距离,left值是-100em,是想让span一开始不在可视区域之内。然后当鼠标经过时,再重新设置left的值到正确位置。
另外,一般情况下,对行内元素设置宽高是没有用的,但是上边的代码中我们可以成功对span进行宽度width的设置,是因为这里span已经是绝对定位了,绝对定位后的行内元素可以设置宽和高。
知识点:行内元素设置宽高的几种方法


行内元素设置宽高的3种方法
  • 使用display: display:block / inline-block
  • 使用position: position:absolute / fixed
  • 使用float:float:left / right
6、没有了,可以测试看一下,现在就实现了一个简单的图像映射。



快速回复 返回顶部 返回列表