CSS-图像映射_html/css_WEB-ITnose

图像映射是将一些区域变成热点，我们在网上获取搜索图片，图片上会有关于任务的简短信息介绍，还有一个接触更多的就是QQ空间的相册，浏览QQ空间照片鼠标滑动到人物头像的时候让你选择标记人物，都是将图片和内容混合在一起进行表现。用户在看图片的时候不在是冰冷冷的图片，其实就是实现起来这种内容和图片的映射很简单，简单的看下效果:

 

Html代码:

    <!-- 博客园-FlyElephant http://www.cnblogs.com/xiaofeixiang/ -->    <div class="group-img">        <img src="../../public/images/group.jpg" alt="合影">        <ul>            <li class="li">                <a href="http://www.cnblogs.com/xiaofeixiang/">                    <span class="outer">        	<span class="inner">        	<span class="note">李连杰</span>                    </span>                    </span>                </a>            </li>            <li class="yao">                <a href="http://www.cnblogs.com/xiaofeixiang/"> <span class="outer">        	<span class="inner">        	<span class="note">姚明</span>                    </span>                    </span>                </a>            </li>        </ul>    </div>

　CSS代码：

    .group-img {        width: 423px;        height: 480px;        position: relative;    }        .group-img a {        position: absolute;        display: block;        text-decoration: none;        color: #000;        border: 1px solid transparent;    }        .group-img a .outer {        display: block;        border: 1px solid transparent;    }        .group-img a .inner {        display: block;        width: 100px;        height: 80px;        border: 1px solid transparent;        margin: 3px;    }        .group-img a .note {        position: absolute;        top: 100px;        left: -9999px;        background: #BDBDBD;        width: 106px;        padding: 5px;        text-align: center;        color: #fff;    }        .group-img .li a {        top: 100px;        left: 120px;    }        .group-img .yao a {        top: 8px;        left: 260px;    }        .group-img a:hover,    .group-img a:focus {        border: 1px solid #d4d82d;    }        .group-img a:hover .outer,    .group-img a:focus .outer {        border: 1px solid #00FF7F;    }        .group-img a:hover .inner,    .group-img a:focus .inner {        border: 1px solid #00CED1;    }        .group-img a:hover .note,    .group-img a:focus .note {        left: 0px;    }

CSS布局需要注意两点将容器的大小和图片的大小保持一致，不显示的文字通过left隐藏文字，鼠标滑动的时候回归正常~