2007-03-03

CSS实例讲解:地图提示

来源: 蓝色理想作者:blankzheng 评论 0 条

作者的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"><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> </td> <br> </td> </tr> <tr align="left"> <td colspan="2">共7页: 上一页 1 <a href='32014_2.html'>[2]</a> <a href='32014_3.html'>[3]</a> <a href='32014_4.html'>[4]</a> <a href='32014_5.html'>[5]</a> <a href='32014_6.html'>[6]</a> <a href='32014_7.html'>[7]</a> <a href='32014_2.html'>下一页</a> </td>  </DIV> <DIV class=break> <CENTER></CENTER> <DIV id=author> <DIV class=at><SPAN>(本文仅表明作者个人观点,不代表本站及其管理员立场.)</SPAN> <a href="/plus/recommend.php?arcID=32014" target=_blank>推荐</a> <A href="/plus/stow.php?arcID=32014">收藏</A> <A href="/member/article_add.php" target=_blank>投稿</A> <a href="#" onClick="window.print();">打印</a> <a href="#top">返回</a> <a href="#" onClick="window.close();">关闭</a></DIV> </DIV>上一篇：<a href='/webdesign/CSS/20071115/32013.html'>根据浏览器和分辨率调用CSS代码</a> <br />下一篇：<a href='/webdesign/CSS/20071115/32015.html'>display:inline-block的深入理解</a> </DIV> <A name=feek></A> <div id="feedback"> <ol id="gbook"> <img src="/img/ajax_small.gif" align="absmiddle" /> 评论加载中… </ol> </div> </DIV></DIV> <DIV class=cr> <DIV class=index> <table width="264" height="256" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_2315680"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="34"; alimama_width=250; alimama_height=250; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>热门排行</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/CSS/20071115/32019.html'>CSS如何为同一个元素处理多种规则</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32020.html'>彻底弄懂CSS盒子模式之二</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32021.html'>技巧文章：常用CSS修改实际操作技巧</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31911.html'>美化网页制作精美圆角表格</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31913.html'>CSS 陈列馆-收集站精选</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31914.html'>网页中背景样式表的应用</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31994.html'>用CSS样式表来定义博客上的链接样式</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31989.html'>如何使用HTC文件来封装CSS样式</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31980.html'>为不同的浏览器载入不同CSS的二种方法</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31982.html'>CSS实现当前页的滑动门菜单效果方法</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31981.html'>CSS实现导航条图片的翻转菜单</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31964.html'>CSS样式表实现文字变图象特效</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31965.html'>CSS样式表完成可以控制的闪烁效果</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31971.html'>网页设计引入CSS样式的五种方式</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32018.html'>纯CSS代码实现翻页</a></LI>  </UL> </DIV></DIV> <DIV class=index> <DIV class=indext> <B>推荐文章</B></DIV> <DIV class="indexc list"> <UL>   </UL></DIV></DIV> <DIV class=index><table width="264" height="60" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"><img border="0" src="/img/2.gif" /><br> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_860008"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="13"; alimama_width=250; alimama_height=60; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>相关文章</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/CSS/20071115/32015.html'>display:inline-block的深入理解</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32013.html'>根据浏览器和分辨率调用CSS代码</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32012.html'>IE中伪类:hover的使用及BUG</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32011.html'>合理使用HTML标签进行CSS布局</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32017.html'>Div CSS布局入门教程(全)</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32018.html'>纯CSS代码实现翻页</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32010.html'>100%点击区的滑动门</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32019.html'>CSS如何为同一个元素处理多种规则</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32009.html'>简易实现DIV圆角的JavaScript代码</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32020.html'>彻底弄懂CSS盒子模式之二</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32008.html'>纯CSS搞的alt跟title效果</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32021.html'>技巧文章：常用CSS修改实际操作技巧</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32007.html'>如何处理网页字体</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32022.html'>web标准化设计：常用的CSS命名规则</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32006.html'>用CSS制作鼠标经过图像</a></LI>  </UL></DIV></DIV> </DIV> <DIV class=clear></DIV></DIV> <DIV id=server><A href="/">网站首页</A> 　- 　<A href="/plus/sitemap.html" target=_blank>网站地图</A>　- 　　<A href="http://bbs.whzz.org/" target=_blank>站长论坛</A> 　- 　<A href="/member/article_add.php" target=_blank>网站投稿</A> 　- 　<script src='http://s37.cnzz.com/stat.php?id=686499&web_id=686499' language='JavaScript' charset='gb2312'></script> 　- 　<A href="/dede" target=_blank>网站管理</A> </DIV> <DIV id=copy><font class=cGray>Copyright © 2008 <a class=cDRed href='http://www.whzz.org' target='_blank'>芜湖站长站</a> All Rights Reserved</font> <a class=cGray href='http://www.miibeian.gov.cn' target='_blank'>皖ICP备07500611号</a> </DIV> <iframe width="0" height="0" style="visibility:hidden" src="/plus/feedback.php?arcID=32014" id="igbook" name="igbook"></iframe> </BODY></HTML>