【CSS】CSS Image Map：图片地图实现

最新推荐文章于 2024-07-05 23:24:20 发布

Chx.zhang

最新推荐文章于 2024-07-05 23:24:20 发布

阅读量1k

点赞数

分类专栏： CSS/HTML/DOM

本文链接：https://blog.csdn.net/qq_38987146/article/details/114280201

版权

CSS/HTML/DOM 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

什么是图片地图？

用户点击图片的不同区域，就可以获得不同反馈（比如说跳转到不同的页面、触发不同的事件）的技术。

实现: 在这里插入图片描述
源码：(源于代码之家论坛)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="keywords" content="JS代码,地图,图片地图,css地图">
  <meta name="description" content="纯CSS实现的图片地图效果">
  <title>纯CSS实现的图片地图效果</title>
  <style type="text/css">
    #container {
      width: 580px;
      height: 268px;
      margin: 0 auto;
    }

    h1 {
      margin-bottom: 20px;
      border-bottom: 2px solid #000;
      font: bold 28px Arial, Helvetica, sans-serif;
      text-align: center;
      padding-bottom: 5px;
    }

    h1 a {
      color: #000;
      text-decoration: none;
    }

    ul#continents1,
    ul#continents2,
    ul#continents3 {
      list-style: none;
      width: 580px;
      height: 268px;
      position: relative;
      background: url(http://demo.jb51.net/js/2013/cssimagemaps/images/map.png) no-repeat 0 0;
    }

    ul#continents1 li,
    ul#continents2 li,
    ul#continents3 li {
      position: absolute;
    }

    .northamerica {
      width: 227px;
      height: 142px;
      top: 2px;
      left: 0px;
    }

    .southamerica {
      width: 108px;
      height: 130px;
      top: 131px;
      left: 76px;
    }

    .africa {
      width: 120px;
      height: 140px;
      top: 83px;
      left: 209px;
    }

    .europe {
      width: 120px;
      height: 84px;
      top: 1px;
      left: 211px;
    }

    .asia {
      width: 215px;
      height: 175px;
      top: 1px;
      left: 283px;
    }

    .australia {
      width: 114px;
      height: 95px;
      top: 152px;
      left: 432px;
    }

    ul#continents1 li a,
    ul#continents2 li a,
    ul#continents3 li a {
      display: block;
      outline: none;
      height: 100%;
    }

    ul#continents1 li a,
    ul#continents2 li a {
      text-indent: -9000px;
    }

    ul#continents2 li a:hover,
    ul#continents3 li a:hover {
      background: url(http://demo.jb51.net/js/2013/cssimagemaps/images/map.png) no-repeat 0 0;
    }

    ul#continents2 li.northamerica a:hover,
    ul#continents3 li.northamerica a:hover {
      background-position: 0 -270px;
    }

    ul#continents2 li.southamerica a:hover,
    ul#continents3 li.southamerica a:hover {
      background-position: -226px -273px;
    }

    ul#continents2 li.africa a:hover,
    ul#continents3 li.africa a:hover {
      background-position: -209px -417px;
    }

    ul#continents2 li.europe a:hover,
    ul#continents3 li.europe a:hover {
      background-position: -22px -427px;
    }

    ul#continents2 li.asia a:hover,
    ul#continents3 li.asia a:hover {
      background-position: -363px -268px;
    }

    ul#continents2 li.australia a:hover,
    ul#continents3 li.australia a:hover {
      background-position: -412px -455px;
    }

    ul#continents3 li a span {
      display: none;
    }

    ul#continents3 li a:hover span {
      display: block;
    }

    ul#continents3 li a:hover span {
      display: block;
      padding: 5px;
      width: 150px;
      background: #000;
      position: relative;
      top: 50%;
      font: 11px Arial, Helvetica, sans-serif;
      opacity: .75;
      filter: alpha(opacity=75);
      color: #FFF;
    }

    ul#continents3 li a:hover span strong {
      display: block;
      margin-bottom: 2px;
      font-size: 12px;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1><a href="#" title="Visit the Noobcube Tutorial on CSS Image Maps">Simple CSS Image Map</a>
    </h1>
    <ul id="continents1">
      <li class="northamerica"><a href="#">North America</a></li>
      <li class="southamerica"><a href="#">South America</a></li>
      <li class="asia"><a href="#">Asia</a></li>
      <li class="australia"><a href="#">Australia</a></li>
      <li class="africa"><a href="#">Africa</a></li>
      <li class="europe"><a href="#">Europe</a></li>
    </ul>
    <h1><a href="#" title="Visit the Noobcube Tutorial on CSS Image Maps">CSS Image Map w/Hover
        States</a> </h1>
    <ul id="continents2">
      <li class="northamerica"><a href="#">North America</a></li>
      <li class="southamerica"><a href="#">South America</a></li>
      <li class="asia"><a href="#">Asia</a></li>
      <li class="australia"><a href="#">Australia</a></li>
      <li class="africa"><a href="#">Africa</a></li>
      <li class="europe"><a href="#">Europe</a></li>
    </ul>
    <h1><a href="#" title="Visit the Noobcube Tutorial on CSS Image Maps">CSS Image Map w/Tooltip on
        Hover</a> </h1>
    <ul id="continents3">
      <li class="northamerica">
        <a href="#">
          <span>
            <strong>North America</strong>
            Population: 528,720,588
          </span>
        </a>
      </li>
      <li class="southamerica">
        <a href="#">
          <span>
            <strong>South America</strong>
            Population: 385,742,554
          </span>
        </a>
      </li>
      <li class="asia">
        <a href="#">
          <span>
            <strong>Asia</strong>
            Population: 3,879,000,000
          </span>
        </a>
      </li>
      <li class="australia">
        <a href="#">
          <span>
            <strong>Australia</strong>
            Population: 21,807,000
          </span>
        </a>
      </li>
      <li class="africa">
        <a href="#">
          <span>
            <strong>Africa</strong>
            Population: 922,011,000
          </span>
        </a>
      </li>
      <li class="europe">
        <a href="#">
          <span>
            <strong>Europe</strong>
            Population: 731,000,000
          </span>
        </a>
      </li>
    </ul>
  </div>
</body>
</html>

Chx.zhang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【CSS】CSS Image Map：图片地图实现

什么是图片地图？用户点击图片的不同区域，就可以获得不同反馈（比如说跳转到不同的页面、触发不同的事件）的技术。实现:源码：<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="JS代码,地图,图片地图,css地图"
复制链接

扫一扫

专栏目录