正文

【CSS系列】图像映射

IP云
IP云V管理员/3 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
 <!DOCTYPE html >

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style type="text/css">

 #pic{

     width:640px;

     height:425px;

     position:relative;/**关键点，这样可以让包含的链接相对于div的边缘进行绝对定位*/}

 #pic ul{

     margin:0;

     padding:0;

     list-style:none;/**不显示列表符号，将列表的margin和padding设为0*/

     }

 #pic a {

     position:absolute;

     width:100px;

     height:120px;

     text-indent:-1000em;/**对锚链接进行绝对定位，他们将移到容器div左上角。然后可以将他们定位到正确的人身上，形成热点，设置宽和高创建需要点击的区域链接文本仍然存在，使用一个大的负数作为文本缩进从而让他们从屏幕上消失。*/}

 #pic .rich a{

     top:15px;

     left:95px;

     }

 #pic .andy a{

     top:115px;

     left:280px;}

 #pic .jeremy a{

     top:250px;

     left:425px;}

 #pic a:hover{/**创建翻转效果，鼠标停留的时候实线*/

     border:1px solid #fff;}

 </style>

 </head>

 <body>

 <div id="pic">

 <img src="../CSSMastery/Chapter05/images/group-photo.jpg" width="640" height="425" alt="Richard , Andy and Jeremy"/>

 <ul>

 <li class="rich">

 <a href="http://www.clagnut.com/" title="Richard Rutter">Richard Rutter</a>

 </li>

 <li class="andy">

 <a href="http://www.andybudd.com/" title="Andy Budd">Andy Budd</a>

 </li>

 <li class="jeremy">

 <a href="http://www.adactio.com/" title="Jeremy Keith">Jeremy Keith</a>

 </li>

 </ul>

 </div>

 </body>

 </html>

相关阅读

目录[+]