css
地图弹窗（map pop）具体演示
<!DOCTYPE htmlPUBLIC "-//W3C//DTD 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>实例讲解：地图提示（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: transparenturl(/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:activespan.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 lia: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 lia#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 lia#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 lia#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 lia#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 lia#map05:active span.offset { margin-top:-154px; margin-left:120px;}</style></head><body> <ul> <li><a id="map01"href="#map01"><span class="offset"><imgsrc="http://file.wbgxw.com/UpLoadPic/2007-4/200741154312934.jpg" alt="Post Office"/><span>This is the Popsville community <strong>PostOffice</strong>, your home of over-priced postage. Click map formore</span></span></a></li> <li><aid="map02" href="#map02"><span class="offset"><imgsrc="http://file.wbgxw.com/UpLoadPic/2007-4/200741154312167.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"><spanclass="offset"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313256.jpg"alt="River Beach" /><span>Spend lazy summer afternoons at thebeautiful <strong>River Beach</strong>. Hang out on thenude beach. Click map formore</span></span></a></li> <li><aid="map04" href="#map04"><span class="offset"><imgsrc="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313876.jpg" alt="Woodland Traders"/><span>Our local <strong>WoodlandTraders</strong> is a veritable Mecca of consumer goods andhardware. Click map formore</span></span></a></li> <li><aid="map05" href="#map05"><span class="offset"><imgsrc="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313540.jpg" alt="Wild Game Diner"/><span>Country living means road kill, and the<strong>Wild Game Diner</strong> prepares it with specialsauce. Click map formore</span></span></a></li> </ul></body></html>这个实例，基本上是应用hover来实现隐藏/显示效果。
实例初始部分内容被隐藏，当hover时让其隐藏的内容显示。对于初始的隐藏我们可以通过，对父元素设置相对位置（position : relative;），对其要隐藏的子元素设置绝对位置（position : absolute;），然后对要隐藏的子元素设置margin属性，并给于无限大负值让其移动无限远隐藏，而当hover触发时，通过对隐藏的子元素重新设置margin值让其显示。对于图片中变化的部分我们可以通过hover时背景图的变化来实现。
首先我们要准备好分析用的图片，如下总共7张，或许有人要问，为什么背景触发的图片使用一张，而不使用5张。其实部分原因大家应该可以看出，就是以后维护的方便，修改一张图总比修改5张图片来的方便，其次使用5张图浏览器需要加载5次，而使用1张图浏览器只需要加载一次就行了。那或许有朋友要问了，那我把2张背景图放在一张上可以吗？按照你上面的理论，不是更方便吗？是的，放一张上从逻辑上是可以的，但有时候还要考虑到图片的大小和图片加载的速度。
首先我们要显示5部分内容，内容结构相似，我们可以选用无序列表来显示介绍的图片和内容：
<ul>
<li><a id="map01" href="#map01"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154312934.jpg" alt="Post Office" />This is the Popsville community <strong>Post Office</strong>, your home of over-priced postage. Click map for more</a></li>
<li><a id="map02" href="#map02"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154312167.jpg" alt="Dew Drop Inn" />Home is where the beer is. And that means the <strong>Dew Drop Inn</strong>. Live music on the weekends. Click map for more</a></li>
<li><a id="map03" href="#map03"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313256.jpg" alt="River Beach" />Spend lazy summer afternoons at the beautiful <strong>River Beach</strong>. Hang out on the nude beach. Click map for more</a></li>
<li><a id="map04" href="#map04"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313876.jpg" alt="Woodland Traders" />Our local <strong>Woodland Traders</strong> is a veritable Mecca of consumer goods and hardware. Click map for more</a></li>
<li><a id="map05" href="#map05"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313540.jpg" alt="Wild Game Diner" />Country living means road kill, and the <strong>Wild Game Diner</strong> prepares it with special sauce. Click map for more</a></li>
</ul>
对于a中的内容我们进行隐藏，我们考虑增加span元素来实现，代码修改如下：
<ul>
<li><a id="map01" href="#map01"><span class="offset"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154312934.jpg" alt="Post Office" />This is the Popsville community <strong>Post Office</strong>, your home of over-priced postage. Click map for more</span></a></li>
<li><a id="map02" href="#map02"><span class="offset"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154312167.jpg" alt="Dew Drop Inn" />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></a></li>
<li><a id="map03" href="#map03"><span class="offset"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313256.jpg" alt="River Beach" />Spend lazy summer afternoons at the beautiful <strong>River Beach</strong>. Hang out on the nude beach. Click map for more</span></a></li>
<li><a id="map04" href="#map04"><span class="offset"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313876.jpg" alt="Woodland Traders" />Our local <strong>Woodland Traders</strong> is a veritable Mecca of consumer goods and hardware. Click map for more</span></a></li>
<li><a id="map05" href="#map05"><span class="offset"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313540.jpg" alt="Wild Game Diner" />Country living means road kill, and the <strong>Wild Game Diner</strong> prepares it with special sauce. Click map for more</span></a></li>
</ul>
在显示的时候文字会跟着图片排版，为了方便我们对其中的描述文字进行样式调整而不影响图片的布局，我们单独给描述文字增加span元素，代码修改如下：
<ul>
<li><a id="map01" href="#map01"><span class="offset"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154312934.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="http://file.wbgxw.com/UpLoadPic/2007-4/200741154312167.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="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313256.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="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313876.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="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313540.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>
部分我们已经写好，下面将是我们对其表现的设计部分，即部分。
首先我们清除一下元素默认的边距（内边距和外边距）和设置img的默认边框为0：
* {
margin:0;
padding:0;
}
img {
border:0;
}
我们定义下ul的样式，包括ul的预设标记，大小，高度，边框：
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;
}
对于li的显示方式设置内联（display: inline;）行布局：
ul li {
display:inline;
}
下面是我们讲解的重点，隐藏/显示效果。
对li中的a元素我们设置其块元素显示（display: block;），让其相对位置（position: relative;），并使链接不显示下划线。
ul li a {
position:relative;
display:block;
text-decoration:none;
}
让类选择器为offset的span隐藏，至于怎样隐藏文章开头已经分析了：
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;
}
我们再来对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 htmlPUBLIC "-//W3C//DTD 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>实例讲解：地图提示（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: transparenturl(/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:activespan.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 lia: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 lia#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 lia#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 lia#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 lia#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 lia#map05:active span.offset { margin-top:-154px; margin-left:120px;}</style></head><body> <ul> <li><a id="map01"href="#map01"><span class="offset"><imgsrc="http://file.wbgxw.com/UpLoadPic/2007-4/200741154312934.jpg" alt="Post Office"/><span>This is the Popsville community <strong>PostOffice</strong>, your home of over-priced postage. Click map formore</span></span></a></li> <li><aid="map02" href="#map02"><span class="offset"><imgsrc="http://file.wbgxw.com/UpLoadPic/2007-4/200741154312167.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"><spanclass="offset"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313256.jpg"alt="River Beach" /><span>Spend lazy summer afternoons at thebeautiful <strong>River Beach</strong>. Hang out on thenude beach. Click map formore</span></span></a></li> <li><aid="map04" href="#map04"><span class="offset"><imgsrc="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313876.jpg" alt="Woodland Traders"/><span>Our local <strong>WoodlandTraders</strong> is a veritable Mecca of consumer goods andhardware. Click map formore</span></span></a></li> <li><aid="map05" href="#map05"><span class="offset"><imgsrc="http://file.wbgxw.com/UpLoadPic/2007-4/200741154313540.jpg" alt="Wild Game Diner"/><span>Country living means road kill, and the<strong>Wild Game Diner</strong> prepares it with specialsauce. Click map formore</span></span></a></li> </ul></body></html>对于隐藏/显示，还可以通过定义了绝对位置的子元素left负值无限远，并物理隐藏（visibility:hidden）或者通过改变display属性来实现。有兴趣的朋友可以尝试一下用上面的两种思路来实现。就当作为这堂课的作业！
