css-图像地图

最新推荐文章于 2021-06-17 15:01:27 发布

weixin_34378045

最新推荐文章于 2021-06-17 15:01:27 发布

阅读量94

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lianzi/archive/2011/08/08/2131576.html

    <div id="ImageMap">
<a href="#" class="tip" id="c1">  
<span class="popbox">图片的评论1</span>
</a>
<a href="#" class="tip" id="c2">  
<span class="popbox" >图片的评论2</span>
</a>
</div>

#ImageMap{
    background:url(2.jpg) no-repeat;
    width:500px;
    height:332px;

}
a.tip{
    color:red;
    text-decoration:none;
    position:relative;
    border:1px solid #FFFFFF;
    width:30px;
    height:30px;
}
a.tip span{display:none};
a.tip:hover{cursor:hand;}
a.tip:hover .popbox {
    display:block;
    position:absolute;
    top:15px;
    left:-30px;
    width:100px;
    background-color:#424242;
    color:#fff;
    padding:10px;
}
#c2{
    top:60px;
    left:180px;
}