css图像映射

图像映射使我们可以将图像的一些区域指定为热点。下面我们来看看图像映射的xhtml和css代码：

xhtml:
<div id="pic">
<img src="img.jpg" width="600" height="450" alt="img" />
<ul>
<li class="avirl"><a href="#" title="avirl"><span class="outer"><span class="inner"><span class="note">Avirl</span></span></span></a></li>
<li class="guitar"><a href="#" title="guitar"><span class="outer"><span class="inner"><span class="note">Guitar</span></span></span></a></li>
<li class="mike"><a href="#" title="mike"><span class="outer"><span class="inner"><span class="note">Mike</span></span></span></a></li>
</ul>
</div>

css:
#pic{
width:600px;
height:450px;
position:relative;/*对它包含的连接可以相对div进行绝对定位*/
}
#pic ul{
margin:0;
padding:0;
list-style:none;
}
#pic a{
position:absolute;
width:100px;
height:120px;
color:#000;
text-decoration:none;
border:1px solid transparent;/*设置透明边框，避免鼠标停留时的移动*/
}
#pic .avirl a{
top:15px;
left:95px;
}
#pic .guitar a{
top:115px;
left:280px;
}
#pic .mike a{
top:250px;
left:425px;
}
#pic a:hover{
border:#d4d82d;
}
#pic a .outer{
display:block;
width:98px;
height:118px;
border:1px solid #000;
}
#pic a .inner{
display:block;
width:96px;
height:116px;
border:1px solid #fff;
}
#pic a .note{
position:absolute;
bottom:-3em;
width:9em;
padding:0.2em 0.5em;
background-color:#ffc;
text-align:center;
left:-30000px;/*将文本隐藏到屏幕左边之外*/
margin-left:-5em;/*设置提示框在热点区域下水平居中*/
}
#pic a:hover .note{
left:50px;/*显示文本内容*/
}
#pic:hover a .outer,#pic a:hover .outer{/*IE6只支持锚链接上的鼠标停留*/
border:1px solid #000;
}
#pic:hover a .inner,#pic a:hover .inner{
border:1px solid #fff;
}

OK啦~~~效果搞定了！