作者的BLOG:http://www.planabc.net/
地图弹窗(map pop)具体演示
运行代码框
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS实例讲解:地图提示(map pop)档</title>
<style type=”text/css” media=”all”>
* {
margin:0;
padding:0;
}
img {
border:0;
}
#show{
text-align:left;
}
ul {
list-style-type:none;
background: transparent url(/articleimg/2007/03/4514/map_flat.jpg) no-repeat 0 0;
width:350px;
height:250px;
border:1px solid #000;
}
ul li {
display:inline;
}
ul li a {
position:relative;
display:block;
text-decoration:none;
}
ul li a span.offset {
position:absolute;
margin-top:-9000px;
margin-left:-9000px;
}
ul li a:hover span.offset, ul li a:focus span.offset, ul li a:active span.offset {
color: #000;
background-image:none;
background-color:#ffffde;
border:1px solid #000;
display:block;
width:150px;
height:auto;
text-decoration:none;
cursor:pointer;
}
ul li a:hover span.offset span, ul li a:focus span.offset span, ul li a:active span.offset span {
display:block;
width:140px;
margin:5px;
height:120px;
}
ul li a#map01 {
width:80px;
height:60px;
margin-top:0;
margin-left:130px;
}
ul li a#map01:hover, ul li a#map01:focus, ul#cmp li a#map01:active {
background:transparent url(http://www.blueidea.com/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -130px 0px;
}
ul li a#map01:hover span.offset, ul li a#map01:focus span.offset, ul li a#map01:active span.offset {
margin-top:-1px;
第 1 2 3 4 5 6 7 8 9 10 11 页