css图像映射

CSS图像映射

<div class="imgmap">
<img src="img/nerdcore.jpg" width="333" height="500" alt="some of the clearleft team">
<ul>
<li class="r"><a href="#" title="r">r</a></li>
<li class="s"><a href="#" title="s">s</a></li>
<li class="c"><a href="#" title="c">c</a></li>
<li class="j"><a href="#" title="j">j</a></li>
<li class="p"><a href="p" title="r">p</a></li>
</ul>
</div>

<style type="text/css">
.imgmap{
width:333px;
height:500;
position:relative;
}
.imgmap ul{
padding:0px;
margin:0px;
list-style:none;
}
/*对链接进行绝对定位*/
.imgmap a{
position:absolute;
display: block;
width:50px;
height:60px;
text-indent:-1000em;
}
/*将各个链接定位到相应的人身上*/
.imgmap .r a{
top:50px;
left: 80px;
}
.imgmap .s a{
top:90px;
left: 200px;
}
.imgmap .c a{
top:140px;
left: 55px;
}
.imgmap .j a{
top:140px;
left: 145px;
}
.imgmap .p a{
top:165px;
left: 245px;
}
/*为了创建翻转效果 将一个白色的实线边框应用于鼠标悬停时的链接*/
.imgmap a:hover,.imgmap a:focus{
border:1px solid #fff;
}
/*解决IE浏览器白色边框不显示的问题（给锚链接添加透明的背景 或无效的图像地址）*/
.imgmap a{
position:absolute;
display: block;
background-image: url(img/shim.gif);
width:60px;
height:80px;
text-indent:-1000em;
}
</style>

flickr风格的图像映射

<div class="imgmap">
<img src="img/nerdcore.jpg" width="333" height="500" alt="some of the clearleft team">
<ul>
<li class="r"><a href="#" title="r"><span class="outer"><span class="inner"><span class="note">r</span></span></span></a></li>
<li class="s"><a href="#" title="s"><span class="outer"><span class="inner"><span class="note">s</span></span></span></a></li>
<li class="c"><a href="#" title="c"><span class="outer"><span class="inner"><span class="note">c</span></span></span></a></li>
<li class="j"><a href="#" title="j"><span class="outer"><span class="inner"><span class="note">j</span></span></span></a></li>
<li class="p"><a href="#" title="r"><span class="outer"><span class="inner"><span class="note">r</span></span></span></a></li>
</ul>
</div>

<style type="text/css">
.imgmap{
width:333px;
height:500;
position:relative;
}
.imgmap ul{
padding:0px;
margin:0px;
list-style:none;
}
/*对链接进行绝对定位*/
.imgmap a{
position:absolute;
display: block;
background-image: url(img/shim.gif);
color:#000;
text-decoration: none;
border: 1px solid transparent;
}
.img a .outer{
display: block;
border:1px solid transparent;
}
.imgmap a .inner{
display: block;
width:50px;
height:60px;
border:1px solid transparent;
}
/*将各个链接定位到相应的人身上*/
.imgmap .r a{
top:50px;
left: 80px;
}
.imgmap .s a{
top:90px;
left: 200px;
}
.imgmap .c a{
top:140px;
left: 55px;
}
.imgmap .j a{
top:140px;
left: 145px;
}
.imgmap .p a{
top:165px;
left: 245px;
}
/*为了创建翻转效果 将一个白色的实线边框应用于鼠标悬停时的链接*/
.imgmap a:hover,.imgmap a:focus{
border-color:#d4d82d;
}
.imgmap a .note{
position:absolute;
bottom:-30px;
width:70px;
padding:3px 5px;
background-color:#ffc;
text-align:center;
/*使说明部分在热点下面水平居中，而不是对准左边 将说明span的左边缘定位到热点的中点 接下来使用负的外边距值将说明span向左移动说明部分宽度的一半*/
/*left:25px;*/
margin-left:-40px;
/*将文本隐藏到屏幕左边之外 并且在鼠标悬停时对它重新定位*/
left:-100000px;
}