CSS Image Maps—图像地图


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;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}/*这里不需要解释*/

5.原作者认为,这个模型不是ideal(理想的),因为可能背景图片太费事,第二个模型是根据png图片透明原理(FireFox下)

CSS改进如下:

dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none;
 background: transparent url(note.png) repeat;}
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat;
top: -10px; left: -5px; background: transparent url(hover.png) repeat;}

这样就避免了,制作office.jpg那样麻烦的图片了,只要给a标签 加上背景图片就能区别出map的位置,但是只有firefox支持怎么行,我们
熟悉的IE怎么办?

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hover.png',sizingMethod='scale');

作者是使用他来实现的,国内css研究者们已经翻译了这个技术

而我使用:filter:alpha(opacity=80);便解决了,都是CSS的filter,这个再研究,我也不太明白

本文作者:



相关阅读:
Server Application Unavailable错误解决方法
JS代码格式化和语法着色V2
ASP、PHP与javascript根据时段自动切换CSS皮肤的代码
CSS兼容性技巧大全(一)
JS实例:网页上图片延迟加载的JS代码
Rundll.exe的多功能
Linux如何在后台执行程序
网页制作代码经验总结:JS代码优化
ASP.NET中常用的用来输出JS脚本的类
一个简单的javascript菜单(4)
CSS教程:创建性感的CSS样式表
校内网css代码添加背景图片常用代码
PHP 遍历XP文件夹下所有文件
简易而又灵活的Javascript拖拽框架(一)
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4