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

来源：互联网发布：淘宝头像设计制作编辑：程序博客网时间：2024/06/04 20:24
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>
这里写图片描述
阅读全文
0 0