手机凤凰网
用户名 密码 下次自动登录 注册 | 忘记密码
peewee
凤凰博报 由你开始

css：地图提示

发表于 2007-03-22 09:48:00 类别：程序应用

<!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）档http://www.blueidea.com/tech/web/2007/4514.asp</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(/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;
 margin-left:230px;
}

ul li a#map02 {
 width:110px;
 height:75px;
 margin-top:-50px;
 margin-left:235px;
}

ul li a#map02:hover, ul li a#map02:focus, ul li a#map02:active {
 background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -235px -10px;
}

ul li a#map02:hover span.offset, ul li a#map02:focus span.offset, ul li a#map02:active span.offset {
 margin-top:-11px;
 margin-left:125px;
}

ul li a#map03 {
 width:75px;
 height:95px;
 margin-top:3px;
 margin-left:115px;
}

ul li a#map03:hover, ul li a#map03:focus, ul li a#map03:active {
 background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -115px -88px;
}

ul li a#map03:hover span.offset, ul li a#map03:focus span.offset,ul li a#map03:active span.offset {
 margin-top:-89px;
 margin-left:245px;
}

ul li a#map04 {
 width:110px;
 height:120px;
 margin-top:-60px;
 margin-left:5px;
}

ul li a#map04:hover, ul li a#map04:focus, ul li a#map04:active {
 background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -5px -123px;
}

ul li a#map04:hover span.offset, ul li a#map04:focus span.offset, ul li a#map04:active span.offset {
 margin-top:-124px;
 margin-left:355px;
}

ul li a#map05 {
 width:95px;
 height:97px;
 margin-top:-90px;
 margin-left:240px;
}

ul li a#map05:hover, ul li a#map05:focus, ul li a#map05:active {
 background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -240px -153px;
}

ul li a#map05:hover span.offset, ul li a#map05:focus span.offset, ul li a#map05:active span.offset {
 margin-top:-154px;
 margin-left:120px;
}
</style>
</head>
<body>
 <ul>
   <li><a id="map01" href="#map01"><span class="offset"><img src="/articleimg/2007/03/4514/map1.jpg" alt="Post Office" /><span>This is the Popsville community <strong>Post Office</strong>, your home of over-priced postage. Click map for more</span></span></a></li>
    <li><a id="map02" href="#map02"><span class="offset"><img src="/articleimg/2007/03/4514/map2.jpg" alt="Dew Drop Inn" /><span>Home is where the beer is. And that means the <strong>Dew Drop Inn</strong>. Live music on the weekends. Click map for more</span></span></a></li>
    <li><a id="map03" href="#map03"><span class="offset"><img src="/articleimg/2007/03/4514/map3.jpg" alt="River Beach" /><span>Spend lazy summer afternoons at the beautiful <strong>River Beach</strong>. Hang out on the nude beach. Click map for more</span></span></a></li>
    <li><a id="map04" href="#map04"><span class="offset"><img src="/articleimg/2007/03/4514/map4.jpg" alt="Woodland Traders" /><span>Our local <strong>Woodland Traders</strong> is a veritable Mecca of consumer goods and hardware. Click map for more</span></span></a></li>
    <li><a id="map05" href="#map05"><span class="offset"><img src="/articleimg/2007/03/4514/map5.jpg" alt="Wild Game Diner" /><span>Country living means road kill, and the <strong>Wild Game Diner</strong> prepares it with special sauce. Click map for more</span></span></a></li>
   </ul>
</body>
</html>

分享 浏览(464) 评论(6)
上一篇 << css代码实现翻页(二）      下一篇 >> 转-女孩如果判断男人的财富

早期评论 添加评论    近期相关评论

请登录以后再发表评论。

关于博主

peewee

[color=#A52A2A] 桃李春风一杯酒,江湖夜雨十年灯.[/color] [IMG]http://blogdsk.phoenixtv.com/UploadFiles/2006-12/1216663966.png[/IMG] 把更多时间放在目标和方向上，而不是来向别人证明我是个什么样的人，也无需用一切甚至生命、友情、鲜血证明自己是对的。

加为好友

给博主留言    查看留言

文章列表

文章分类

最近发布