图像映射是将一些区域变成热点，我们在网上获取搜索图片，图片上会有关于任务的简短信息介绍，还有一个接触更多的就是QQ空间的相册，浏览QQ空间照片鼠标滑动到人物头像的时候让你选择标记人物，都是将图片和内容混合在一起进行表现。用户在看图片的时候不在是冰冷冷的图片，其实就是实现起来这种内容和图片的映射很简单，简单的看下效果:
Html代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!-- 博客园-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代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
.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隐藏文字，鼠标滑动的时候回归正常~
本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/5039018.html，如需转载请自行联系原作者
