CSS Image Maps—图像地图

日期：2007年5月25日作者：查看:[大字体中字体小字体]

原文地址：http://frankmanno.com/ideas/css-imagemap-redux/

1.先说说图像地图是什么？

就是在一张图片上标记出有url的地方，当鼠标滑过的时候，给以像<a href="url" title="description Words">links</a>这样的代码显示的
效果。

2.查看实例

Example 1      Example 2

3.方法

这是xhtml:

<dl id="OfficeMap">
  <dt id="monitor">1. Monitor</dt>
  <dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor. I wish I had an LCD!</span></a></dd>
</dl>

分析这段代码是必要的，因为他是结构，效果肯定是通过a标签的:hover,以及:hover span的定义实现的，怎样具体去实现效果呢?

1.)需要一张图片，那就给#officeMap一个背景图片office.jpg

dl#officeMap{
margin: 0;
padding: 0;
background: transparent url(office.jpg) top left no-repeat;
height: 262px;
width: 350px;
position: relative;
}

定义内部元素相对定位，不然怎样给map定位位置?

2.)下来是dt dd标签

dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display: none; }/*这个url的介绍，不用显示*/
dd{ margin: 0; padding: 0; position: absolute; font-size: 85%; }/*定义绝对定位*/

3.)#monitorDef的定义,a:hover效果

dd#monitorDef{ top: 65px; left: 114px; }/*定义位置*/
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }

dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat;
top: -10px; left: -5px; }/*背景图片滑动,参考滑动门技术(原理相似)，span内容的定位*/

4.)下来是重点,span这个主要效果是怎么实现的?

dd#monitorDef a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
[1] [2] 下一页
CSS Image Maps—图像地图相关文章：
CSS Image Maps—图像地图相关软件

上一篇:标签for属性与对应的id之关系

下一篇:一款DIV+CSS导航条效果

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

CSS Image Maps—图像地图

精品推荐

热点TOP10

特别推荐