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

　CSS实例讲解:地图提示

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

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

我们再来对span中的文字描述进行样式修饰，因为span开始是被隐藏的，所以设置只需在触发的情况下设置就可以了：

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;
height:120px
margin:5px;
}

隐藏显示效果我们是达到了，但具体的map触发范围，定位，还有背景的变换我们还没实现，继续往下探讨，仅以map01为例，其他雷同。

设置map01的宽度和高度，以及外边距位置：

ul li a#map01 {
width:80px;
height:60px;
margin-top:0;
margin-left:130px;
}

当触发时改变其背景图片（图片的位置注意和map01的外边距margin位置相对应）：

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;
}

设置触发后描述部分的位置，开始我们对于a元素设置了1px的边框，那么要让map01中的描述显示在右侧，并且和a元素的位置top相同，则要让类选择器为offset的span上移1px（我们通过margin-top的负值来实现），设置描述部分的外左边距，刚才我们设置了map01的外左边距为130px（ul的总宽为350px），那我们可以设置描述部分的外边距大于220px（350px-130px）。

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;
}

根据上面map01的设置方法来设置map02/map03/map04/map05，如下：

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;
}

可能有某些朋友看上面的map代码的位置有些糊涂了，下面几点或许有助于朋友们理解：
1、li元素设置为了内联行布局；
2、当一个li和另外一个li的大小超过ul的大小时，另一个li将换行显示。

再看下整体效果：

运行代码框
<!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 全部选择提示：你可先修改部分代码，再按运行]

对于隐藏/显示，还可以通过定义了绝对位置的子元素left负值无限远，并物理隐藏（visibility:hidden）或者通过改变display属性来实现。有兴趣的朋友可以尝试一下用上面的两种思路来实现。就当作为这堂课的作业！

经典论坛讨论：
http://bbs.blueidea.com/thread-2723547-1-1.html

本文链接：http://www.blueidea.com/tech/web/2007/4514.asp　

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

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

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

相关文章

彻底弄懂CSS盒子模式之三

作者文章

display:inline-block的深入理解

中英文双语导航菜单


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule