flickr风格图像映射效果
<style>
.imgmap{
width:333px ;
height: 500px;
position: relative;
}
.imgmap ul{
margin:0;
padding: 0;
list-style: none;
}
.imgmap a{
position: absolute;
display: block;
background-image: url("shim.gif");
color: #000;
text-decoration: none;
border: 1px solid transparent;
}
.imgmap a .outer{
display: block;
border: 1px solid transparent;
}
.imgmap a .inner{
display: block;
width: 50px;
height: 60px;
border: 1px solid transparent;
}
.imgmap a:hover,
.imgmap a:focus{
border-color: #d4d82d;
cursor: pointer;
}
.imgmap:hover a.outer,
.imgmap:focus a.outer,
.imgmap a:hover .outer,
.imgmap a:focus.outer{
border-color: #000;
}
.imgmap:hover a.inner,
.imgmap:focus a.inner,
.imgmap a:hover .inner,
.imgmap a:focus.inner{
border-color: #fff;
}
.imgmap .People1 a{
top: 50px;
left: 80px;
}
.imgmap .People2 a{
top: 90px;
left: 200px;
}
.imgmap .People3 a{
top: 140px;
left: 55px;
}
.imgmap .People4 a{
top: 140px;
left: 145px;
}
.imgmap .People5 a{
top: 165px;
left: 245px;
}
.imgmap a .note{
position: absolute;
bottom: -3em;
width: 7.4em;
padding: 0.2em 0.5em;
background-color: #ffc;
text-align: center;
left: -30000px;
margin-left: -4em;
white-space: nowrap;
-webkit-border-radius: 0.5em;
}
.imgmap a:hover .note,
.imgmap a:focus .note{
left: 25px;
z-index: 1;
}
.imgmap .People3 a:hover .note,
.imgmap .People5 a:hover .note{
left: 30px;
z-index: 1;
}
</style>
</head>
<body>
<div class="imgmap">
<img src="nerdcore.jpg">
<ul>
<li class="People1">
<a href="#">
<span class="outer">
<span class="inner">
<span class="note">People1</span>
</span>
</span>
</a>
</li>
<li class="People2">
<a href="#">
<span class="outer">
<span class="inner">
<span class="note">People2</span>
</span>
</span>
</a>
</li>
<li class="People3">
<a href="#">
<span class="outer">
<span class="inner">
<span class="note">People3</span>
</span>
</span>
</a>
</li>
<li class="People4">
<a href="#">
<span class="outer">
<span class="inner">
<span class="note">People4</span>
</span>
</span>
</a>
</li>
<li class="People5">
<a href="#">
<span class="outer">
<span class="inner">
<span class="note">People5</span>
</span>
</span>
</a>
</li>
</ul>
</div>
</body>