CSS实例讲解:地图提示 - 网页制作

　CSS实例讲解:地图提示

作者：blank　时间： 2007-03-01　文档类型：原创　来自：蓝色理想

第 1 页 CSS实例讲解:地图提示 [1]
第 2 页 CSS实例讲解:地图提示 [2]
第 3 页 CSS实例讲解:地图提示 [3]
第 4 页 CSS实例讲解:地图提示 [4]

作者的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(/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"><img src="/articleimg/2007/03/4514/map1.jpg" alt="Post Office" />This is the Popsville community Post Office, your home of over-priced postage. Click map for more</a></li> <li><a id="map02" href="#map02"><img src="/articleimg/2007/03/4514/map2.jpg" alt="Dew Drop Inn" />Home is where the beer is. And that means the Dew Drop Inn. Live music on the weekends. Click map for more</a></li> <li><a id="map03" href="#map03"><img src="/articleimg/2007/03/4514/map3.jpg" alt="River Beach" />Spend lazy summer afternoons at the beautiful River Beach. Hang out on the nude beach. Click map for more</a></li> <li><a id="map04" href="#map04"><img src="/articleimg/2007/03/4514/map4.jpg" alt="Woodland Traders" />Our local Woodland Traders is a veritable Mecca of consumer goods and hardware. Click map for more</a></li> <li><a id="map05" href="#map05"><img src="/articleimg/2007/03/4514/map5.jpg" alt="Wild Game Diner" />Country living means road kill, and the Wild Game Diner prepares it with special sauce. Click map for more</a></li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

这个实例，基本上是应用hover来实现隐藏/显示效果。

实例初始部分内容被隐藏，当hover时让其隐藏的内容显示。对于初始的隐藏我们可以通过，对父元素设置相对位置（position : relative;），对其要隐藏的子元素设置绝对位置（position : absolute;），然后对要隐藏的子元素设置margin属性，并给于无限大负值让其移动无限远隐藏，而当hover触发时，通过对隐藏的子元素重新设置margin值让其显示。对于图片中变化的部分我们可以通过hover时背景图的变化来实现。

首先我们要准备好分析用的图片，如下总共7张，或许有人要问，为什么背景触发的图片使用一张，而不使用5张。其实部分原因大家应该可以看出，就是以后维护的方便，修改一张图总比修改5张图片来的方便，其次使用5张图浏览器需要加载5次，而使用1张图浏览器只需要加载一次就行了。那或许有朋友要问了，那我把2张背景图放在一张上可以吗？按照你上面的理论，不是更方便吗？是的，放一张上从逻辑上是可以的，但有时候还要考虑到图片的大小和图片加载的速度。

出处：蓝色理想
责任编辑：moby

上一页下一页 CSS实例讲解:地图提示 [2]

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

彻底弄懂CSS盒子模式之三

作者文章

display:inline-block的深入理解

中英文双语导航菜单

站点最新

站点最新列表

悟道web标准:前端性能优化

纯中文域名".中国"今日提交申请

世界之窗3.0皮肤设计大赛结果公布

使用jQuery制作滑动动画效果的层

如何设计网页横幅

Plump 图标设计

Subrat Nayak图标设计

百度知道推出文档分享服务

CSS Sprites(CSS雪碧):要还是不要?

UIRSS三周年纪念日推出V2公测版

栏目最新

栏目最新列表

Firefox的Jetpack扩展案例分析

阿里妈妈UED谈CSS Sprites技术

Photoshop中设计绿色时尚Web网站

操作Dom节点实现间歇滚动新闻

浏览器15年历史回顾

如何创建Firefox的Jetpack扩展

全透视:CSS Z-index 属性

用PS 3D工具绘制甜麦圈包装袋

悟道Web标准:让W3C标准兼容终端

悟道WEB标准:统一思想,遵循标准