CSS图像映射

图像映射功能，仅仅用HTML也可以实现，而且近些年也不太流行了，但作为一种简单的技术，还是学了一下。

由于比较简单，在一点点说明之后就直接贴代码和效果了哈

1. 如何快速的定位锚点？（也就是你如何知道你想确定的锚点区域的像素是多少）

我在网上搜方法基本都是自己写程序实现的，后来发现可以直接用windows自带的画图工具打开图片，将“视图”中的标尺显示出来，即可：如下图所示，我定位的是红色的点哈

2. 对于图像映射的位置定义：除了需要定义整个图片的大小之外，最重要的是需要将position属性设置为relative，这样后面定义的像素位置才是相对于图片的位置，而不是对于网页的位置。

这一点很重要，如果整个网页只有这一图片，则没有什么区别，但这种情况相当少见对吧？

好了，贴代码

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>image map</title>
 6     <style>
 7     /*h1 {margin-left: 140px;}
 8     img {margin-left:100px; }*/
 9 
10     .imagemap{
11         width: 550px;
12         height: 366px;
13         position: relative;
14     }
15 
16     .imagemap ul{
17         margin:0;
18         padding: 0;
19         list-style: none;
20     }
21     
22     .imagemap a{
23         position: absolute;
24         display: block;
25         width:50px;
26         height: 60px;
27         text-indent: -1000em;
28     }
29     
30     .imagemap .Zhou a{
31         top: 50px;
32         left: 350px;
33     }
34 
35     .imagemap .Li a{
36         top: 80px;
37         left: 125px;
38     }
39 
40     .imagemap .Wang a{
41         top: 70px;
42         left: 40px;
43     }
44 
45     .imagemap .Lix a{
46         top: 75px;
47         left: 238px;
48     }
49 
50     .imagemap .Chao a{
51         top: 60px;
52         left: 460px;
53     }
54 
55     .imagemap a:hover, .imagemap a:focus{
56         border: 2px solid #FFFF22;
57     }
58 
59     </style>
60 </head>
61 <body>
62     <h1>This is the band of "LIN DIAN!"</h1>
63     <div class="imagemap">
64         <img src="img/band.jpg" alt="Lin Dian" width="550" height="366" >
65     <ul>
66         <li class="Zhou"><a href="http://baike.baidu.com/view/983931.htm" title="Zhou Xiaoou" target="_blank">Zhou Xiaoou</a></li>
67         <li class="Li"><a href="http://baike.baidu.com/view/144696.htm" title="Li Ying" target="_blank">Li Ying</a></li>
68         <li class="Wang"><a href="http://baike.baidu.com/view/2556319.htm" title="Wang Xiaodong" target="_blank">Wang Xiaodong</a></li>
69         <li class="Lix"><a href="http://baike.baidu.com/view/2577550.htm" title="Li Xiaojun" target="_blank">Li Xiaojun</a></li>
70         <li class="Chao"><a href="http://baike.baidu.com/view/1291623.htm" title="Chao Luomeng" target="_blank">Chao Luomeng</a></li>
71     </ul>
72     </div>
73 
74 </body>
75 </html>

效果图：

鼠标悬停在某头像时，则可显示姓名，并出现黄色边框，点击则可进入百度百科对该任务的介绍