作者的BLOG：http://www.planabc.net/
地图弹窗（map pop）具体演示
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这个实例，基本上是应用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="/articleimg/2007/03/4514/map1.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="/articleimg/2007/03/4514/map2.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="/articleimg/2007/03/4514/map3.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="/articleimg/2007/03/4514/map4.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="/articleimg/2007/03/4514/map5.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="/articleimg/2007/03/4514/map1.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="/articleimg/2007/03/4514/map2.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="/articleimg/2007/03/4514/map3.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="/articleimg/2007/03/4514/map4.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="/articleimg/2007/03/4514/map5.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>
