精通css 第六章 (2)图片热点定位

最新推荐文章于 2023-01-25 16:27:45 发布

qq_34664510

最新推荐文章于 2023-01-25 16:27:45 发布

阅读量1k

点赞数

分类专栏：精通css-高级web标准解决方案-代码 css3 css

本文链接：https://blog.csdn.net/qq_34664510/article/details/77019096

版权

css3 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

精通css-高级web标准解决方案-代码

3 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

flickr风格图像映射效果

<style>
    .imgmap{
        width:333px ;/*等于大图片尺寸*/
        height: 500px;
        position: relative;
    }
    .imgmap ul{
        margin:0;
        padding: 0;
        list-style: none;
    }
    .imgmap a{
        position: absolute;
        display: block;
        /*IE不会显示隐藏在屏幕之外的链接，即使是显示设置宽高
        添加透明的背景图片，使IE正常显示*/
        background-image: url("shim.gif");
        color: #000;
        /*不隐藏链接文字，而显示工具提示*/
        text-decoration: none;
        border: 1px solid transparent;
    }
    /*鼠标不浮动时默认边框为透明，不影响正常看图*/
    .imgmap a .outer{
        display: block;
        border: 1px solid transparent;
    }
    .imgmap a .inner{
        display: block;
        width: 50px;
        height: 60px;
        border: 1px solid transparent;
    }
    .imgmap a:hover,
    .imgmap a:focus{
        border-color: #d4d82d;
        cursor: pointer;
    }

    .imgmap:hover a.outer,
    .imgmap:focus a.outer,
    .imgmap a:hover .outer,
    .imgmap a:focus.outer{
        border-color: #000;
    }
    .imgmap:hover a.inner,
    .imgmap:focus a.inner,
    .imgmap a:hover .inner,
    .imgmap a:focus.inner{
        border-color: #fff;
    }
    /*根据图像得到尺寸，进行相对定位*/
    .imgmap .People1 a{
        top: 50px;
        left: 80px;
    }
    .imgmap .People2 a{
         top: 90px;
         left: 200px;
     }
    .imgmap .People3 a{
        top: 140px;
        left: 55px;
    }
    .imgmap .People4 a{
        top: 140px;
        left: 145px;
    }
    .imgmap .People5 a{
        top: 165px;
        left: 245px;
    }

    .imgmap a .note{
        position: absolute;
        bottom: -3em;/*note显示咋热点边框的底部位置*/
        width: 7.4em;
        padding: 0.2em 0.5em;
        background-color: #ffc;
        text-align: center;
        left: -30000px;/*文本隐藏到屏幕左边，悬停重新定位*/
        margin-left: -4em;/*note左移sapn宽度一半，显示下部居中*/
        white-space: nowrap;
        -webkit-border-radius: 0.5em;
    }
    .imgmap a:hover .note,
    .imgmap a:focus .note{
        left: 25px;
        z-index: 1;
    }
    .imgmap .People3 a:hover .note,
    .imgmap .People5 a:hover .note{
        left: 30px;
        z-index: 1;
    }

</style>
</head>
<body>
    <!--创建双边框，在内部添加两个额外的，再添加一个note的span-->
    <div class="imgmap">
        <img src="nerdcore.jpg">
        <ul>
            <li class="People1">
                <a href="#">
                <span class="outer">
                    <span class="inner">
                        <span class="note">People1</span>
                    </span>
                </span>
                </a>
            </li>

            <li class="People2">
                <a href="#">
                <span class="outer">
                    <span class="inner">
                        <span class="note">People2</span>
                    </span>
                </span>
                </a>
            </li>

            <li class="People3">
                <a href="#">
                <span class="outer">
                    <span class="inner">
                        <span class="note">People3</span>
                    </span>
                </span>
                </a>
            </li>

            <li class="People4">
                <a href="#">
                <span class="outer">
                    <span class="inner">
                        <span class="note">People4</span>
                    </span>
                </span>
                </a>
            </li>

            <li class="People5">
                <a href="#">
                <span class="outer">
                    <span class="inner">
                        <span class="note">People5</span>
                    </span>
                </span>
                </a>
            </li>

        </ul>
    </div>
</body>

这里写图片描述

qq_34664510

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精通css 第六章 (2)图片热点定位

flickr风格图像映射效果<style> .imgmap{ width:333px ;/*等于大图片尺寸*/ height: 500px; position: relative; } .imgmap ul{ margin:0; padding: 0; list-style: no
复制链接

扫一扫