首页 > 代码库 > 【css】图像映射

【css】图像映射

2024-09-15 12:00:37   219人阅读

 1 <!DOCTYPE html >
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 #pic{
 8     width:640px;
 9     height:425px;
10     position:relative;/**关键点，这样可以让包含的链接相对于div的边缘进行绝对定位*/}
11 #pic ul{
12     margin:0;
13     padding:0;
14     list-style:none;/**不显示列表符号，将列表的margin和padding设为0*/
15     }
16 #pic a {
17     position:absolute;
18     width:100px;
19     height:120px;
20     text-indent:-1000em;/**对锚链接进行绝对定位，他们将移到容器div左上角。然后可以将他们定位到正确的人身上，形成热点，设置宽和高创建需要点击的区域链接文本仍然存在，使用一个大的负数作为文本缩进从而让他们从屏幕上消失。*/}
21 #pic .rich a{
22     top:15px;
23     left:95px;
24     }
25 #pic .andy a{
26     top:115px;
27     left:280px;}
28 #pic .jeremy a{
29     top:250px;
30     left:425px;}
31 #pic a:hover{/**创建翻转效果，鼠标停留的时候实线*/
32     border:1px solid #fff;}
33 </style>
34 </head>
35 
36 <body>
37 <div id="pic">
38 <img src="../CSSMastery/Chapter05/images/group-photo.jpg" width="640" height="425" alt="Richard , Andy and Jeremy"/>
39 
40 <ul>
41 <li class="rich">
42 <a href="http://www.clagnut.com/" title="Richard Rutter">Richard Rutter</a>
43 </li>
44 <li class="andy">
45 <a href="http://www.andybudd.com/" title="Andy Budd">Andy Budd</a>
46 </li>
47 <li class="jeremy">
48 <a href="http://www.adactio.com/" title="Jeremy Keith">Jeremy Keith</a>
49 </li>
50 </ul>
51 </div>
52 </body>
53 </html>

 

【css】图像映射


联系
我们